Scrollytelling with restraint: narrative pages that respect the scrollbar

A while back we published the reader's-side rules for this format — scrollytelling without the hostage-taking covers the reading-position contract, symmetric reversibility, and when scroll genuinely earns its place. This is the companion piece: what happens after the contract is signed. The budgets, the build patterns, and the honest tests that separate a narrative page people remember from a 40-second slideshow people abandon.

Because here's the uncomfortable data from our own project retros: across the scroll-narrative pages we've shipped, the ones that performed best had less choreography than the ones that performed worst. Restraint isn't the aesthetic compromise. Restraint is the technique.

The one-pin budget

Pinning — freezing a visual while scroll scrubs its states — is the strongest move scrollytelling has, and like all strong moves it devalues with repetition. Our hard rule: one pinned scene per page. Not per section. Per page.

The reasoning is pacing, not performance. A pinned scene is a held breath: the reader stops travelling and starts watching. One held breath feels like a moment; three feel like being talked at. On the Meridian Climate data explorer, exactly one scene pins — the emissions line morphing into sectors — and everything around it is ordinary, confident, scrolling prose. That asymmetry is why the pinned moment lands. It's also why readers finish: the page is 90% normal web, so the 10% of choreography reads as craft instead of endurance test.

Everything outside the pin gets cheaper devices:

• Stepped reveals that use the reader's own scroll as the trigger — in-view fades with the house 160–240ms curve from motion that earns its keep. No scrubbing, just punctuation.
• Sticky-adjacent layouts: a visual column that sticks while a text column scrolls past it, with the visual swapping at step boundaries rather than tweening continuously. Cheaper to build, kinder to readers, and it degrades to a stack of illustrated sections for free.
• Deliberate stillness. The section with no motion at all is a legitimate scrollytelling beat. Contrast is the whole point.

Chapter navigation is not optional

The failure mode of pinned narrative is disorientation: the reader loses the scrollbar as a progress signal and can't answer "how much more of this is there?" Two devices fix it, and both are navigation design, not decoration:

The progress rail. A slim track along the viewport edge, one tick per chapter, current chapter lit. Ours follow our sticky elements rules: never overlapping content, never wider than a hairline plus ticks, hidden on viewports under 768px where the chapters collapse into visible headings anyway.

Named, jumpable chapters. Every chapter has a heading, an anchor, and an entry in the rail that works as a link. This does three jobs at once: it restores the reader's agency (skip the part you don't need), it makes the piece deep-linkable (your data story will be shared mid-story), and it forces the editorial honesty of naming your own chapters. A scrollytelling piece whose steps can't be named is a piece with no story — which the honesty test below will catch.

The reduced-motion variant is a first-class design

Here's where most teams go wrong: prefers-reduced-motion gets less page. The pin collapses, the tween becomes an instant jump, the user gets a diminished experience and learns that reduced-motion means reduced-effort.

Invert the process. Design the still version first. The reduced-motion variant is the storyboard of the piece: each chapter rendered as a static composition, all annotations visible, charts at their final states, copy carrying full meaning. This version has to be good — not an accommodation, a product. Then the motion version is a progressive enhancement layered on top, and three things fall out for free:

1. The story is now comprehensible without choreography (the strongest clause of the contract).
2. Print and RSS and link-preview all work, because the static version is the document.
3. QA gets a canonical reference — "does the motion version match the storyboard?" is answerable.

We treat this as a design deliverable with its own review. If the storyboard version feels thin, we don't ship the motion version either — the motion was hiding a content gap.

Performance: the choreography tax is real

Scroll-linked animation is a per-frame render budget spent every tick of the wheel. The discipline is the same as anywhere else — our engineers' version is animation at 60fps — applied to scrolling's specific traps:

• IntersectionObserver, not scroll handlers. Respond to elements entering bands of the viewport; never compute positions in a scroll listener. The listener runs on janky urban transit connections exactly as often as on your M4.
• Transform and opacity only. If a tween changes layout properties, it's painting every frame. Morph the layer, not the document — this is why stepped visual swaps beat continuous tweens in most of our builds.
• Cap the canvas. If you're rendering WebGL for a scroll scene (we do it for exactly one client a year, on purpose), the canvas must be sized, DPR-capped and paused when off-screen. An unpinned hero that keeps rendering below the fold is a battery complaint waiting for a GitHub issue.
• Budget the whole page, not the scene. The pinned scene gets maybe 60% of the motion budget. The remaining 40% is for everything else the page does — and pages that allocate 100% to their showpiece scroll like porridge precisely at the moment they're showing off.

The honesty test: does the story need scroll at all?

Before any of this ships, the piece takes the print test: print it (or export the reduced-motion storyboard as a flat document) and read it. Three questions, out loud, in critique:

1. Does the reading order survive with zero interaction? If meaning depends on the tween, the story was never written down.
2. What did scroll add? If the answer is "object constancy through a transformation" — the Meridian case — keep it. If the answer is "drama," cut it. Drama is available from typography for free.
3. Would a reader choose this format knowing what it costs? A page that takes 40 seconds to deliver 12 seconds of information is a tax. Some stories justify the tax — origin stories, data transformations, spatial journeys. Feature announcements do not.

The print test has killed roughly a third of our proposed scrollytelling projects in the brief stage, which is exactly the right rate. The survivors are stronger for it: designing for print and designing for restraint turn out to be the same skill — deciding what the document is before decorating how it moves.

Key takeaways

• One pinned scene per page, maximum. Everything else gets stepped reveals, sticky-adjacent swaps, or deliberate stillness.
• Chapter navigation (progress rail + named, jumpable anchors) restores the reader's sense of place and makes the piece shareable mid-story.
• Design the reduced-motion variant first as a storyboard-quality static product; motion is progressive enhancement, never the carrier of meaning.
• Scroll-linked animation obeys ordinary motion budgets: IntersectionObserver over scroll listeners, transform/opacity only, canvases DPR-capped and paused off-screen.
• Run the print test. If the story doesn't survive stillness, scroll was doing a writer's job.

FAQ

Doesn't one pinned scene limit the format? It limits the abuse of the format. The strongest scroll narratives ever published are overwhelmingly front-loaded prose with one or two moments of choreography. The pin is a spice; the budget forces you to cook.

What about horizontal scroll sections? They break the reading-position contract twice — direction and expectation — and they trap trackpad users in ways mouse users never notice. We haven't green-lit one since 2022 and nothing has been missed.

How do we convince stakeholders who want "the Apple thing"? Show them scroll-depth analytics from their own current site. Most marketing pages lose half their readers by the second screen. Choreography doesn't fix that — a faster first screen and a better opening sentence do. Then offer the pin as the moment the argument deserves it.

Is scrollytelling accessible at all? Fully, if the document carries the meaning: semantic chapters, real headings, the storyboard as the reduced-motion and keyboard experience, and no content that exists only mid-tween. The inaccessible versions are the ones where motion is the content.

Narrative pages that hold their nerve are part of what we build across websites and climate-and-media data storytelling — bring us a story worth the scroll.