Scrollytelling

スクロールテリング / 2012– / Layout / Reading on the Web

A web page form in which the reader's scroll position is the clock of the story, with graphics, maps and video changing as the page moves and reversing when the reader scrolls back. Visualization researchers treat it as the web equivalent of long form journalism and describe its structure as either linear or elastic, the elastic kind letting a reader dive deeper on demand. News outlets including the New York Times, the BBC and The Economist built the form out.

Scrollytelling — AI-generated interpretation 1
AI-generated interpretation, not a reference work
Scrollytelling — AI-generated interpretation 2
AI-generated interpretation, not a reference work
Scrollytelling — AI-generated interpretation 3
AI-generated interpretation, not a reference work

At a glance

Visual cues

  • A graphic that holds still on screen while a single narrow column of text passes over it
  • Changes made by opacity and by moving a map, so that scrolling back undoes them in the same order
  • Photography, video and data visualization sharing one article
  • A path that is either straight through or branches into an optional deeper detour and returns

Best used for

  • Laying out an investigation or a research explainer as one page where the graphic holds and only the text moves
  • Giving a long read on a phone a way to advance that needs no instructions

Use this style

Take the compact brief into a project or hand the structured version to an AI tool.

design.mdimage promptJSON APIMCP & machine accessCompose
open in ChatGPTopen in Claudeopen in Google AI
Detailed guidance and sourcesProduction rules, reference works, comparisons, research and citation formats

Dictionary entry

Type
Keep the body in one column. The scroll sets the pace, not the page, so hold the measure narrow and place headings only at joints in the story.
Composition
Pin the graphic and let the text pass over it. How many paragraphs you assign to one graphic is the pacing.
Material
Build only changes that can run backwards, such as opacity crossfades and map moves, each tied one to one with scroll distance.
Caution
Tying a one shot animation to the scroll leaves a reader who scrolls back looking at nothing, and makes the middle of the article impossible to reread.
Further study
the difference between a single track thread and an elastic one, and the mechanism that brings a reader back in the elastic kind / the relation between how much body text is allotted to one graphic and how long it takes to read through / binding map movement to the amount scrolled and making it hold in both directions

Related entries

Often confused with

More from Reading on the Web

Continue through styles in the same Reading on the Web family, prioritised by shared effects.

Browse all Reading on the Web entries

Cite this entry

The dictionary is meant to be linked to. Take whichever form fits where you are writing.

Link
https://indexstyle.org/styles/scrollytelling
Markdown
[Scrollytelling — IndexStyle](https://indexstyle.org/styles/scrollytelling)
HTML
<a href="https://indexstyle.org/styles/scrollytelling">Scrollytelling — IndexStyle</a>

Back to index position