Scroll

The core storytelling mechanism. A visual stays pinned on screen while text steps scroll past it, changing what the visual shows at each beat of the narrative.

ScrollySection

Medium — ~15KB

The heart of scrollytelling. A background visual stays fixed while the reader scrolls through narrative steps. Each step can change the image, chart, map, or graphic in the background. Unlike a Hero (which is a single opening splash), a ScrollySection lets you tell a multi-step visual story.

Overlay layout — photos change with each step

Text cards float over a full-width background image. Each step crossfades to a different photograph. Scroll slowly to see each image.

Landscape step 1Landscape step 2Landscape step 3

This is a ScrollySection

The background image fills the entire screen and stays pinned in place while you scroll. Right now you're seeing wetland birds — a full-viewport photograph behind this text card. The overlay layout is the most cinematic option, perfect for dramatic photography or video.

Each step changes the visual

As you scrolled past the first step, the background crossfaded to a wide floodplain landscape. Each step can show a different image, map view, chart state, or any other visual. The crossfade transition is smooth and automatic — you can also use dissolves, slides, or instant cuts.

Scroll back up to see it in reverse

Now the background shows a cracked riverbed — drought versus plenty. ScrollySections work in both directions: scroll up to revisit earlier steps and the visual always matches. This bi-directional behaviour lets readers explore at their own pace.

Side-by-side layout — visual pinned on the left

The visual stays on one side while text steps scroll on the other. On mobile, it collapses to a single column.

River landscape 1River landscape 2River landscape 3

Side-by-side layout

This is the same ScrollySection component, just with a different layout setting. The visual is pinned on the left, and these text steps scroll on the right. You can also flip it — visual on the right, text on the left. This layout works especially well for explanatory content, process walkthroughs, or location-based stories.

The visual still changes at each step

Just like the overlay layout, each step can change what the visual shows. The photo has shifted from an aerial river view to a floodplain woodland. You can use photos, maps, charts, video, or any other visual — the same options apply regardless of layout.

Mobile-friendly by default

On phones, this side-by-side layout collapses into a single column automatically. The visual appears above each text step instead of beside it — so the story still makes sense on a small screen without any extra work from you.

When to use

  • The main narrative sections of your story — this is what makes it a "scrollytelling" piece
  • Any time you want a visual to change as the reader moves through text: a map that zooms, a chart that updates, a photo that swaps
  • Explaining a process step by step with a visual that updates alongside
  • Before/after comparisons — each step can swap the background to show a different state
  • Data-driven stories where each paragraph reveals new information in the visual

When NOT to use

  • The opening splash of your story — use a Hero for that (it pins and animates, but doesn't track steps)
  • Static text without a visual companion — use a Section instead (simpler and lighter)
  • A full-width breakout image between text blocks — use FullBleed for that

Configuration

  • Layout — "overlay": the most cinematic option. Text cards float on top of a full-width background visual. The reader scrolls through text while the background fills the entire screen behind it. Best for dramatic photography, video, or immersive visuals
  • Layout — "left": the visual is pinned on the left half of the screen, text steps scroll on the right. Great for explanatory content, process walkthroughs, or when you want text and visual side-by-side. On mobile, this collapses to a single column automatically
  • Layout — "right": same as left, but mirrored — visual on the right, text on the left
  • Background visual: photograph, map, chart, video loop, animation, illustration, data visualisation — anything you can display on screen. It stays fixed while the reader scrolls, and changes at each step
  • Steps: each step is a paragraph or card of text. You can have as many as you need. Each step can trigger a different background visual — a new photo, a zoomed-in map, an updated chart
  • Step data: each step can carry metadata (an image URL, map coordinates, chart configuration) that tells the background what to display. This is how visuals know what to show at each beat
  • Transitions: background visuals crossfade smoothly between steps by default. You can customise this — dissolves, slides, or instant cuts
  • Mobile behaviour: left/right layouts collapse to a single column on phones (under 768px wide). The visual appears above each text step instead of side-by-side. Overlay layout works the same on all devices
  • How it differs from a Hero: a Hero is a single dramatic opening with one visual. A ScrollySection lets the visual change at each step — it's a narrative engine, not a splash page

Limitations

  • Steps need enough text to fill the scroll distance — very short one-line steps may scroll past too quickly for the reader to notice the visual change
  • Only one ScrollySection with heavy content (maps, 3D graphics, large video) should be visible at a time — otherwise performance suffers on slower devices
  • Left/right layouts collapse to a single column on phones (under 768px wide) — make sure your content reads well in both arrangements
  • The background visual is always behind or beside the text — if you need text and visual completely separated, use a Section with an image inside it