Scrollytelling

Scrollytelling is a way of laying out an argument. One graphic is held on screen while the prose moves past it, and each paragraph is a step that changes what the graphic shows: a map zooms to the district under discussion, a chart adds the series the sentence just mentioned, a photograph swaps for the same view forty years later. The reader never loses the picture while reading about it, and never has to hold a figure in their head between the text and the plate. It arrived in newsrooms in the early 2010s and now belongs to any long-form piece with one visual and several things to say about it.

Three parts make one. A sticky graphic, which is the mechanism named by scroll pinning: the figure is held at the top of its container while the container is taller than it. A sequence of steps, which are ordinary blocks of prose in the flow beside or over the graphic. And a trigger, which watches the steps and reports which one currently occupies a chosen line across the viewport, usually somewhere around the middle. That last part is the whole discipline. The step boundary is a line, not a moment, so the graphic changes when the reader has arrived at a paragraph rather than after a fixed number of pixels, and scrolling back up runs the same boundaries in reverse. A story that cannot be read backwards has a bug, not a style.

The line between this and the thing readers hate is thin, and it is drawn at control of the scroll. Scrollytelling holds a graphic still and lets the reader move at their own pace; it does not slow the wheel down, intercept a flick, or spend three screens of scrolling to advance one step. When those happen the reader has lost the scrollbar they were holding, which has its own name and a bad reputation. Nearby patterns do different jobs with the same material: scroll snap advances a whole panel at a time and is a slideshow mechanic rather than a narrative one, and a sticky sidebar also stays put while text scrolls but says the same thing throughout, since it is navigation rather than a step in an argument.

The honest test is what the piece becomes when the technique is unavailable. On a narrow screen there is no room for a graphic beside the prose, so the usual fallback stacks each step under its own copy of the figure, which reads perfectly well and often better. Under prefers-reduced-motion the transitions between states go away and the states remain. And for a reader using a screen reader, the graphic’s changes are invisible unless each step carries the text of what it shows, which is the same discipline alt text asks for, applied once per step rather than once per image. If the story falls apart in all three cases, the scrolling was not carrying the argument, it was carrying the design.