What Is a Scroll-Story Website? Scrollytelling Explained With Examples

Updated September 2026 · Written and maintained by the Progression Agency strategy team

This guide from Progression Agency explains what a scroll-story website is for marketers, publishers, communicators and designers across the United States and worldwide: where scrollytelling came from, the well-known examples that defined the form, how the technique works in the browser, what a scroll story needs to be readable, fast and accessible, and when a brand, a newsroom or a nonprofit should build one.

What is a scroll-story website?

A scroll-story website is a long page built as a sequence of steps. Each step is a block of text; as it enters the viewport, a visual element that stays fixed on screen (a chart, a map, an illustration, a film frame, a 3D model) changes state to match. The reader controls the pace with the scroll wheel or a thumb, which is why the form suits phones as well as desktops. Nothing plays on a timer; the story waits.

Scrollytelling, scroll story and scroll-driven: the terms

Scrollytelling is the journalism term for the technique, a blend of scrolling and storytelling. A scroll story website (written with or without the hyphen) is the same idea described from the page’s side. Scroll-driven animation is the underlying browser mechanism: animation whose progress is tied to scroll position rather than to time. A scrollytelling website uses scroll-driven techniques to tell one story from beginning to end.

Scroll story versus parallax

Parallax website design moves background and foreground layers at different speeds to create depth as the page scrolls. It is a visual effect, not a narrative structure; a parallax page can have no story at all. A scroll story may use parallax as one of its techniques, but its defining feature is that the visuals change meaning with each step of the text.

Scroll story versus a one-page website

A one-page website puts a company’s sections on one scrolling page with a menu of anchors; the sections are independent and the visitor can jump between them. A scroll story is linear: the steps build on each other, there is usually no menu, and jumping ahead breaks the sense. The two are often confused because both scroll; only one is a narrative.

Well-known scroll-story examples

A handful of public works defined the form and are still the references designers and editors cite. None of them is ours; they are listed because they show what the technique is for.

Data journalism and explainers

The origin of the form: a chart, a map or a diagram that changes with each paragraph, so the reader sees the evidence the text describes at the moment it is described. Reuters Graphics and The Pudding are the standing references.

Long-form features

A narrative feature with chapters, full-bleed photography, film and animated maps, in the tradition of “Snow Fall”. The visuals serve scenes rather than data, and pacing is the craft; see news and magazine website design.

Product launches

A product shown from every angle as the visitor scrolls: image sequences, exploded views, feature callouts pinned to parts of the object. The conversion is a pre-order or a configurator; see 3D website design for the interactive variant.

Annual and impact reports

A letter, then chapters with counters that count up, charts that draw themselves and stories from the field, with a PDF for those who want it. The scroll story replaces the report nobody reads.

Brand stories and campaigns

Origin stories, manufacturing processes, sustainability journeys: narratives that benefit from showing rather than claiming. Often built as a microsite with a defined life.

Education, museums and public information

Explainers of how something works, timelines of an era, walkthroughs of a place: scroll stories that teach, where the pace control is the point.

How a scroll-story website works in the browser

The mechanism is simple to describe and exacting to build well. A visual element is made sticky so it stays in view; text steps scroll past it; code detects which step is in view and updates the visual. The table lists the techniques used to do that in 2026.

Two browser features carry most of the load. IntersectionObserver tells the page when a step is visible without expensive scroll handlers, and CSS scroll-driven animations let continuous effects run on the compositor without JavaScript at all, in the browsers that support them. Everything else is a library or a pattern built on those two.

The anatomy of a scroll story

• A title screen that states the subject and the promise in text, before any animation.
• Chapters: three to eight sections, each with a headline the reader can navigate by.
• Steps: short text blocks (40-120 words) that each change the visual once.
• A pinned visual per chapter: chart, map, photograph, film frame, illustration or 3D scene.
• Transitions between chapters that release the pin and re-establish it, with breathing room.
• A progress indicator, so the reader knows how long the story is.
• Static fallbacks: every visual state exists as an image or a plain layout when animation is off.
• Captions, sources and credits attached to the visuals they belong to.
• An ending that asks for one thing: subscribe, share, download, donate, pre-order.
• Structured data and a text version that search engines and AI assistants can read.

Writing for scroll: how the narrative is structured

A scroll story is written before it is designed. The script lists every step, the text of the step and the state the visual should be in when that step is read. Designers and developers build from that script; changing it later is expensive.

Chapters

Each chapter has one visual and one question it answers. Readers should be able to say what a chapter was about; if they cannot, the chapter is doing two jobs.

Steps and beats

A step is one change. If the text describes two things, the visual has to change twice, which means two steps. Short steps keep the visual and the words in sync on a phone screen.

Endings that convert

The last screen returns the reader to the world: what to do with what they now know. Publishers ask for a subscription or a share, brands for a pre-order or a visit, nonprofits for a donation; the ask is one, and it is stated in text.

How a scroll-story website is made

The process below is the one we run; the order protects the schedule, because rewriting a script after animation exists costs more than any other change.

1. Brief: the story, the audience, the one action at the end, the launch date and the channels that will send readers.
2. Research and assets: the data, photographs, film, models or maps the story will use, with rights cleared.
3. Script: every chapter and step written, with the visual state per step described in a table.
4. Storyboard: sketches of each pinned visual in each state, on phone and desktop frames.
5. Design: typography, color, the pinned-visual layouts and the transitions, with a performance budget set.
6. Prototype: one chapter built end to end to test pacing, then reviewed with real readers.
7. Build: the remaining chapters, fallbacks, reduced-motion behavior, structured data and analytics events.
8. Launch: cross-device testing, speed checks, publication and a reading of the scroll-depth data in the first week.

Performance and accessibility on a scroll-story website

The two failure modes of scroll stories are weight and motion. Both are solved in planning, not in QA.

The prefers-reduced-motion media query is the hinge: when it is set, the story still reads from top to bottom with every visual state present, and only the movement between states is removed. A scroll story that cannot be read with motion off was not finished.

• Set the weight budget per chapter before design, and measure it on a phone on a slow connection.
• Prototype the heaviest chapter first; it decides whether the plan is realistic.
• Test the reduced-motion version as a first-class experience, not as an afterthought.
• Check that a screen reader reads steps in narrative order and announces visual changes where they carry meaning.
• Keep the total script length readable in one sitting; scroll depth data will tell you where readers leave.

SEO and AI search for scroll stories

A scroll story can rank and be cited when its text is real HTML and its structure is legible. Search engines and AI assistants read the steps as an article; they do not see the animation, which is fine as long as the text stands on its own.

• A descriptive title and an opening paragraph that states the subject and the finding in plain text.
• Headings for chapters, so the structure is visible to crawlers and to readers who skim.
• Article or NewsArticle structured data with author, publisher and dates.
• Charts and maps with text summaries of what they show, and data sources cited.
• Images with alt text that describes the state, not “chart”.
• A share image and description that work on every network.
• Internal links from the main site and from related articles, so the story is not an orphan.
• A canonical URL on the main domain when the story lives on a subdomain.

Scroll-story websites by who builds them

Newsrooms and magazines

Features, investigations and explainers; the visual desk and the writer work from one script, and the article template gets a scroll-story variant that reuses the site’s typography and markup.

Brands and product teams

Launch and story pages with product sequences, exploded views and manufacturing narratives, with a pre-order or a visit as the ending; see motion design websites for the wider motion system.

Nonprofits and foundations

Impact reports and campaign stories with counters, maps and voices from the field, ending in a donation or a signature; see nonprofit website design.

Museums, universities and public bodies

Explainers, timelines and virtual walkthroughs that teach, often with maps and archival imagery; the pace control serves learning.

Agencies and studios

Case studies and self-promotion; the scroll story shows the craft directly, which is why studios often overbuild them and forget the reader.

Common mistakes in scroll-story websites

• Animating text that would read better standing still.
• Steps so long that the visual changes once per screen of prose, or so short that it flickers.
• A pinned visual that is unreadable on a phone because it was designed for a desktop.
• Motion that ignores prefers-reduced-motion.
• Frame sequences of hundreds of full-size images that stall on cellular connections.
• Headlines baked into images or canvas, invisible to search and screen readers.
• No progress indicator, so readers do not know if they are halfway or nearly done.
• An ending with no ask, so a well-read story produces nothing.
• Rewriting the script after the animation exists.
• Building the story on a platform the newsroom or marketing team cannot update.

What a scroll-story website costs and how long it takes

As planning figures, a scroll-story feature built into an existing site’s template costs $8,000-$25,000 and takes 4-8 weeks, and a standalone scroll-driven microsite with custom animation, film or 3D costs $25,000-$75,000 and takes 8-14 weeks, the same range we quote for an interactive microsite. The drivers are the number of chapters, the media to be produced, 3D or film, and how many of the visual states must be built by hand rather than generated from data.

Glossary of scroll-story terms

• Scrollytelling: storytelling driven by the reader’s scroll position.
• Scroll-story website: a page built as a linear narrative of steps with pinned visuals.
• Step: a block of text that triggers one change in the visual.
• Pinned or sticky visual: an element that stays in view while steps scroll past it.
• Scroll-driven animation: animation whose progress is tied to scroll position rather than time.
• IntersectionObserver: a browser API that reports when an element enters or leaves the viewport.
• Scrollama: an open-source library for step-based scroll stories.
• ScrollTrigger: the GSAP plugin for scroll-linked animation and pinning.
• Scrubbing: mapping scroll position to a point in an animation, image sequence or video.
• Parallax: layers moving at different speeds to suggest depth.
• Reduced motion: a system preference that asks sites to minimize animation.
• Frame sequence: a series of images shown in order as the scroll advances.
• Fallback state: the version of a visual shown when animation or JavaScript is unavailable.

How Progression Agency builds scroll-story websites

We write, design and build scroll-story websites from New York City for publishers, brands and nonprofits across the United States and worldwide: script first, a prototype chapter before the full build, a weight budget and reduced-motion behavior from day one, and text that search engines and AI assistants can read. Related: motion design websites, 3D website design, microsite design, news and magazine website design and website design and development.

Frequently asked questions