Scrollytelling websites: examples and how to build one

Scrollytelling is a page where the reader's scroll advances the story: a graphic, a film or an object stays pinned on screen while short blocks of text pass beside it, and each block changes what the pinned element shows. People also spell it scrolltelling; the technique is the same.

It works when three things hold. Every step changes one thing on the stage, the reader can scroll back and forth at any speed and the story follows, and the words stay real text in the page. Newsrooms built the form for data stories, and product pages now use it to reveal one object in a fixed order.

What makes scrollytelling work#

Mike Bostock's essay How To Scroll, from November 2014, still sets the rules: scrolling should be rapid, incremental and reversible, the page should give instant feedback, and it should not hijack the wheel into slow animated swipes. In values, that becomes a short specification:

The two change rows are the central decision. A stepped story swaps the stage from one state to the next when a step crosses the trigger line, like turning a page. A scrubbed story ties the stage to the scroll position itself, so the reader controls the playhead. Charts and maps usually step; films and 3D objects usually scrub, as in these two designs:

Keep the step text short. Hold each step to about forty to sixty words, so the stage changes at the pace of the reading instead of sitting frozen while the reader catches up. If a point needs two hundred words, it is several steps, or it belongs in a normal section after the pinned sequence ends.

Newsroom examples worth studying#

These four are still online and still worth scrolling slowly, each for a different technique.

Snow Fall, The New York Times#

John Branch's Snow Fall: The Avalanche at Tunnel Creek ran in December 2012 and won the 2013 Pulitzer Prize for Feature Writing. It is the piece most often credited with making the format famous. Its lesson is the rhythm: long passages of text, broken by full-screen video and animated graphics, including a flyover of the terrain and a simulation of the avalanche, arranged in named chapters you can jump between.

Firestorm, The Guardian#

Firestorm, by Jon Henley, published in May 2013, follows one family through the bushfire at Dunalley in Tasmania. It joins video, interactive graphics, ambient sound and text in one downward scroll, and it was widely compared to Snow Fall when it appeared. The lesson is range: the same mechanics that carry a dataset can carry one family's account of a disaster.

What's Really Warming the World?, Bloomberg#

Eric Roston and Blacki Migliozzi's graphic for Bloomberg, from 2015, keeps one chart of observed global temperature on screen and lays the suspected causes over it one step at a time, natural ones first, using modeled data from NASA's Goddard Institute for Space Studies, until greenhouse gases are the line that fits. The lesson is the single stage: one chart, one new line per step, and the argument made by elimination.

A Visual Introduction to Machine Learning, R2D3#

Stephanie Yee and Tony Chu's visual introduction builds a classifier in front of you. Homes in San Francisco and New York start as points on a chart of each home's height above sea level, become a scatterplot when price per square foot is added, and are split into a decision tree as you keep scrolling. The lesson is continuity: the same dots persist from step to step, so the reader never loses track of what is being explained.

Scroll-driven film: the product version#

Brands use the same mechanics with a film in place of a chart. The stage is a video or an image sequence, and the scroll position is its playhead, so the visitor unveils the product at their own speed.

Ardente, shown near the top of this guide, is the purest case: one object, one reveal, then a detail tour, all driven by the scroll. Haymaker tells a studio's story as a fight, which shows that the stage does not have to be a product at all. On a studio's own site that counts twice, because the agency site is itself the portfolio piece. Both depend on a scrub distance chosen on purpose. Pinning for +=300% means three screen heights of scrolling, so a 5 second film advances about 1.7 seconds per screen, slow enough that the reveal never feels rushed.

Scrubbing has a file problem. Every seek decodes forward from the previous keyframe, and libx264's default interval is 250 frames, so a film encoded for normal playback stutters when scrubbed. The fixes are a keyframe every few frames, which makes the file several times larger, or an image sequence: 120 stills at about 60 KB each is roughly 7.2 MB, drawn to a canvas as the scroll moves. Phones can take every other frame. The encoding side is covered in the video background guide, and more scrubbed heroes are collected in scroll animation website examples.

Objects that travel through the sections#

The second product pattern drops the full-screen film and keeps one object on stage while the sections change around it. Each section makes one claim, and the object takes one new pose to match it.

Verdier turns the scroll into an exploded view, so the story is the watch's construction. Palenque carries one bottle through the whole page, which keeps the product in view while the copy changes from origin to tasting to buying. Lacca uses sticky sections, the lightest version of the idea, where panels pin and stack without any film at all.

Written as a specification, the traveling object is a short table of poses: for each section, its x and y in viewport units, its scale and its rotation, plus one easing for every move between them. Four sections might read (0, 0, 1, 0deg), (-22vw, 4vh, 0.9, -12deg), (20vw, 0, 1.1, 8deg) and (0, 6vh, 0.8, 0deg), eased with cubic-bezier(0.65, 0, 0.35, 1). A model given that table builds it; a model told "the bottle follows the scroll" guesses all sixteen numbers.

Three ways to build the scroll engine#

Every scrollytelling page has the same skeleton: a sticky stage and steps in normal flow. What changes is how the page learns which step is active.

.story { display: grid; grid-template-columns: minmax(0, 32rem) 1fr; gap: 4rem; }
.steps { grid-column: 1; }
.stage { grid-column: 2; grid-row: 1; position: sticky; top: 0; height: 100svh; }
.step  { min-height: 90svh; display: grid; align-items: center; }
@media (max-width: 767px) {
  .story { grid-template-columns: 1fr; }
  .stage, .steps { grid-area: 1 / 1; }        /* stage behind, steps as cards over it */
  .steps { position: relative; z-index: 1; }
}

On phones the side-by-side layout has no room, so the media query puts the stage and the steps in the same grid cell. The stage pins full-screen behind, and each step becomes a card over it with a background such as rgba(10, 12, 16, 0.82). Even over a pure white stage, white text on that card measures about 11.8:1, so the words stay readable whatever the stage is showing.

The observer version is short. A root margin of -50% top and bottom shrinks the viewport to a line across its middle, so a step becomes active as it crosses it:

const io = new IntersectionObserver((entries) => {
  for (const e of entries) if (e.isIntersecting) setStep(Number(e.target.dataset.step));
}, { rootMargin: "-50% 0px -50% 0px" });
document.querySelectorAll(".step").forEach((el) => io.observe(el));

CSS scroll-driven animations shipped in Chrome 115, per Chrome's documentation, and in Safari 26, and MDN lists animation-timeline as Baseline across current browsers since October 2026. They suit the small motions inside a step, such as a figure that rises as it enters, and they run without a line of JavaScript:

@supports (animation-timeline: view()) {
  .step-figure {
    animation: rise linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 40%;
  }
}
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }

The @supports wrapper gives older browsers the finished, static figure. GSAP's site states that the whole library is now free, thanks to Webflow's support; the settings that matter are in the GSAP ScrollTrigger guide and the scroll brief.

How to brief an AI model to build a scrollytelling page#

The step table is the brief. A model can build the sticky skeleton from one sentence; what it cannot invent is your story's order. Write one row per step:

Then the global lines, which a model has no way to guess:

Stage: sticky, top 0, height 100svh, right column on desktop; full-screen
behind the steps below 768px, steps as cards with background rgba(10,12,16,0.82).
Trigger: IntersectionObserver, rootMargin -50% 0px -50% 0px. Scroll is native:
no scroll-jacking, no snap. Every step's text is real HTML in reading order.
prefers-reduced-motion: render each step's final stage state as a static figure
under its text, no pinning. Release the pin after the last step.

Hand the model its assets with the brief, in a form it can wire without asking. A chart stage wants its data as a small JSON file with one key per line it will draw. A film stage wants the frame count, the frame size and the file pattern, for example frames/reveal-%03d.webp, 1..120, 1600x900, so the loader and the canvas are built to the real numbers. A 3D stage wants the model's URL and the camera position for each step, written like the pose table above.

The same discipline applies to type: a long-form story reads like an editorial page, so the column, measure and rules from editorial web design apply between the pinned sequences.

Mistakes that break a scrollytelling page#

• Scroll-jacking. Replacing the native scroll with snapped, animated jumps breaks the rapid, reversible scrolling Bostock describes. Let the wheel and the trackpad stay in charge.
• Text inside the canvas. Words baked into an image sequence are invisible to search engines and screen readers. Keep every word in the DOM.
• 100vh on phones. Mobile toolbars change the viewport height; use svh for the stage.
• Two changes per step. If the chart redraws and the camera moves at once, the reader cannot tell which change carried the point.
• Media that autoplays as it scrolls in. Bostock warns against it, because it pulls attention from text the reader has not finished.
• No reduced-motion version. WCAG's Animation from Interactions, Level AAA, calls parallax often non-essential. Static figures per step tell the same story.
• A pin that never ends. The last step should release the stage and return the page to normal scrolling. For depth effects without pinning, see parallax website examples.

Start from a scroll story already written as values#

The quickest way to learn how a scrubbed reveal is specified is to read one that works. Ardente is a complete scroll story in a single design: a covered car, a dust sheet that comes off with the scroll, and a detail tour edge by edge, with its art direction written as values in the prompt, from the palette and type scale to the easing curves, durations and the section order.

The same prompt runs in Claude, ChatGPT, Gemini, Cursor, Lovable, v0 or Bolt, and Ardente comes with a paid plan. If you work in Claude or Cursor, the Thanor MCP can pull the design's full art direction straight into the session without the clipboard.

Open Ardente, scroll the preview once from top to bottom, then copy its prompt into your model of choice. You will have watched the step table before you paste it, which is the fastest way to write your own.