Skip to main content

Scrollytelling — Playground

01Capture
02Compose
03Render
04Deliver
Step 1

Capture

Start with the raw material — colour, light, a first idea.

Step 2

Compose

Arrange the pieces; the pinned panel swaps to match this step.

Step 3

Render

The transition style animates each media change as you scroll.

Step 4

Deliver

Land on the final frame — a scrollytelling narrative.

Drag the vertical scroll on the right — the pinned media swaps to each step with the Crossfade transition.
Crossfade — options
Sample option — updates as you tweak
// On the Section (Section → Animations → Scrollytelling), 2 columns: media layers + steps:
'scrollytelling' => [
    'mode' => 'crossfade',
    'crossfade' => [
        'pin_side'   => 'left',
        'transition' => 0.6,
        'intensity'  => 0.5,
        'progress'   => 'dots',
    ],
],

Scrollytelling is a Section-level control — Section → Animationstab → Scrollytelling. Build the Section with two columns: one holds N media layers, the other N step blocks. The media column pins while the steps scroll, swapping to match the active step with the chosen transition. Pure CSS sticky + IntersectionObserver; honours reduced motion (media shows statically above each step).

Pick a transition on the right and drag the vertical scroll on the stage's right edge — the pinned media panel swaps to match each step, exactly as on a real page. This runs the real runtime: one column pins while the other's steps scroll, the matching media layer gets .is-active by index, and the verbatim per-style CSS runs the transition. Tune media side, transition, intensity, direction and the progress indicator. The Sample option updates as you tweak.

A few styles need real media

The 23 CSS transitions are all here. Parallax Depth, Pixelate Resolve, Color Shift, Frame Sequence, Horizontal Track and Liquid (WebGL) scrub real images or a canvas/WebGL context, so they aren't simulated in this playground — they're documented on this page and work on a live site.

Where it lives

Scrollytelling is a Section-level control — Section → Animations tab → Scrollytelling. Build the Section with two columns: one holds N media layers, the other N step blocks. Step 1 shows media 1, step 2 shows media 2, and so on. Pure CSS sticky + IntersectionObserver; honours reduce motion.

← Back to Scrollytelling