Scrollytelling

Description

Scrollytelling is a narrative interaction pattern in which the user’s scroll position drives transitions in a visualization. As the reader scrolls through blocks of explanatory text, the accompanying chart updates — highlighting different data subsets, changing the axis, adding annotations, transitioning between chart types, or zooming into a region of interest. The visualization typically stays fixed (or “sticky”) in place while the text scrolls past it, creating a cinematic interplay between prose and graphics.

The pattern emerged in data journalism around 2012-2014, with landmark pieces like the New York Times’ “Snow Fall” (2012) and “How the Recession Reshaped the Economy” (2014) demonstrating that scroll-driven storytelling could be more engaging than either static graphics or free-exploration dashboards. The underlying design principle is that scroll is the lowest-friction interaction on the web — every reader already scrolls — so by mapping analytical steps to scroll positions, the author can guide even passive readers through a complex data story.

Technically, scrollytelling relies on Intersection Observer APIs or scroll-position listeners that trigger state changes at defined waypoints. Libraries like Scrollama, GSAP ScrollTrigger, and Svelte’s built-in scroll handling simplify implementation. The design challenge is calibrating the pace: each scroll-triggered step should introduce exactly one new insight, and the transition between steps should be smooth enough to maintain narrative flow but distinct enough to signal that something changed.

Scrollytelling — try it yourself

Prompt Examples

Try these prompts with Claude, ChatGPT, or other AI tools:

“스크롤에 따라 4단계로 데이터가 변화하는 스크롤리텔링 시각화를 만들어주세요.”

“Create a scrollytelling piece that reveals data step by step as the user scrolls.”

When to Use

In data journalism and editorial content where the goal is to walk the reader through a sequence of analytical insights.
When the data story has a clear linear narrative with a beginning, middle, and end.
When the audience is general/non-technical and would not benefit from open-ended exploration tools.
When the visualization has 4-15 meaningful states that build on each other sequentially.
When the story benefits from the author controlling the pace and focus (explanatory mode).

When NOT to Use

When the audience wants to explore the data freely — scrollytelling is inherently author-directed.
When the visualization has only 1-2 states (not enough transitions to justify the pattern).
When the content works better as a static annotated chart or a short animation (no need for scroll-driven pacing).
On very short pages where there is not enough scroll distance to create meaningful waypoints.
When accessibility is a primary concern — screen readers and keyboard-only users may miss scroll-triggered visual changes unless careful ARIA annotations are added.

How It Works

The page layout positions the visualization in a sticky container (CSS position: sticky) that remains visible as the user scrolls.
Narrative text blocks (“steps”) are placed in a scrollable column alongside the sticky visualization.
As each text block enters the viewport (detected via Intersection Observer or scroll offset calculation), a corresponding state change is triggered on the visualization.
The visualization transitions to the new state: data may be filtered, marks may animate, annotations may appear, axes may change, or the entire chart type may transform.
The text explains what the viewer should notice in the current state, providing interpretive context.
Scrolling further advances to the next step. Scrolling backward reverses the transitions, allowing the reader to revisit previous steps.
At the end of the sequence, the visualization may transition into an exploratory mode or a static summary state.

Variations

Sticky-side scrollytelling: Text scrolls in one column, the chart is sticky in the adjacent column. The most common layout on desktop.
Full-bleed scrollytelling: The visualization covers the full viewport, and text cards overlay it. More immersive but harder to read.
Stepper (button-driven): Instead of scroll, forward/back buttons or keyboard arrows advance through states. Avoids scroll-hijacking issues.
Scroll-triggered animation: Rather than discrete state changes, the scroll position continuously drives an animation parameter (e.g., scroll position maps to time in a time-lapse).
Mobile-optimized scrollytelling: Chart stacks above text in a single column. Steps trigger chart changes as text scrolls beneath.
Branching scrollytelling: At certain points, the reader can choose which branch to follow, creating a choose-your-own-adventure data story.

Code Reference

// Scrollama-based scrollytelling setup
const scroller = scrollama();
scroller.setup({
  step: ".scroll-step",
  offset: 0.5,
  debug: false,
})
.onStepEnter(({ index }) => {
  // Transition the chart to state matching the current step
  if (index === 0) showOverview();
  if (index === 1) highlightOutliers();
  if (index === 2) zoomIntoRegion("Northeast");
  if (index === 3) showTimeTrend();
})
.onStepExit(({ index, direction }) => {
  if (direction === "up" && index === 1) showOverview();
});