Scrollytelling Website Examples: 6 Stories and How They Were Built

Why do most scrollytelling example lists look the same?

Because a large share of them are vendor showcases. The examples are real and often excellent, but they are chosen to show what one tool can do.

Take Shorthand, a no-code storytelling platform. Its own list of twelve favorite scrollytelling examples is one of the pages you meet when you search this topic. Every example on it was made with Shorthand, which the page openly says.

There is nothing wrong with that. A platform that lets a newsroom publish a scroll story in days is a genuine shift. It explains why the format moved from a few elite newsrooms to universities, governments and B2B marketers.

The problem is what that framing leaves out. A list built to sell a tool will not tell you where the tool stops. And for a brand whose website is its main sales asset, that limit is the whole decision.

What we did differently

We opened each example and read its markup. Most web pages carry a small "generator" tag naming the software that produced them. That tag, plus the page structure, tells you which production model you are looking at.

It sounds technical. In practice, it is the fastest way to know whether an example belongs to the budget conversation you are about to have.

How we picked and audited these six examples

Our selection criteria

We looked for pages English-speaking audiences are likely to know: a U.S. federal department, international newsrooms, a humanitarian organization, a sponsored campaign in a major trade publication. Every page had to be live on October 8, 2026.

We left out the pieces already covered in our selection of immersive website examples. We also skipped the 2012 New York Times feature everyone cites. We also excluded any page our review tool could not open. We do not describe a page we have not read.

The selection spans 2021 to 2025. Some entries are a few years old on purpose. They show which formats age well, and which tricks already look dated.

The three audit questions

Each example went through the same three questions. They are the ones we ask before any scroll story goes into design.

1. What built it? A storytelling platform, an open-source library with custom code, or a fully custom front end.
2. What does the scroll earn? If the page worked as a plain article, the motion has to justify the extra cost.
3. Does the story survive the worst device? A mid-range phone, a slow connection, and a visitor who has turned off animations.

Six scrollytelling websites and the build path behind each

1. U.S. Department of State, "America in Brushstrokes"

This visual story from the State Department, published in September 2025, tours the contiguous United States through landscape painting. It moves region by region, from New England to the Pacific Northwest, one painting at a time.

Each stop pairs a canvas with its artist, its date and a few paragraphs of history. Shorthand describes the piece as matching each painting with full-width video of the landscape it depicts.

Build path: platform-built. The page's generator tag names Shorthand.

What the scroll earns: pacing. A museum audio guide decides how long you stand in front of each painting. Here, the reader does.

What to take from it: a cultural or heritage brand can borrow this structure almost as is. One object, one place, one short text, repeated with discipline.

2. Stuff, "The tale of two pandemics"

This Stuff interactive, published in September 2021 by Kate Newton, Felippe Rodrigues and Alex Lim, follows Auckland through New Zealand's lockdowns. It splits the story into three eras: Covid 1.0, the separation, and Delta.

Shorthand highlights the timeline device in the core of the report. A date and a lockdown-day counter climb as you scroll, beside a chart showing Auckland pulling away from the rest of the country. At the time of writing, the city had spent 40 extra days in lockdown.

Build path: platform-built, with embedded Datawrapper charts.

What the scroll earns: the feeling of time passing. A counter that ticks under your thumb makes a statistic physical.

What to take from it: whenever your subject has a timeline, the scroll can be the clock. Think company history, project lifecycle or product roadmap.

3. Smartsheet for Adweek, "When Marketing Goes Haywire"

This sponsored guide ran on Adweek in September 2021, paid for by Smartsheet. It walks marketers through five worst-case scenarios, from a flood of creative requests to a blown budget.

Each scenario ends with numbered "steps for survival." Shorthand credits its imagery and scroll-driven animation with keeping a stressful topic light.

Build path: platform-built, published inside a media brand's sponsored section.

What the scroll earns: stopping power inside a trade publication. Next to standard advertorial, the format signals effort.

What to take from it: it is the most direct B2B template in this list. A problem, a scenario, a fix, then your product as the logical next step.

4. Nikkei Asia, "Road to nowhere"

Nikkei Asia's investigation into China's Belt and Road Initiative dates from 2022, judging by the events it covers. It opened a three-part series on debt crises in Pakistan and Sri Lanka.

Its strongest moment is an annotated satellite view of the port of Gwadar. Labels mark the port, the planned berthing channels and the expressway, with imagery credited to Planet Labs.

Build path: platform-built, hosted on a Shorthand subdomain.

What the scroll earns: proof. Showing an underused port from above makes the argument without an adjective.

What to take from it: annotated aerial imagery is one of the most persuasive scroll devices available. It suits any brand that works on real places, from construction to logistics.

5. IDMC, "The road was long: a voice from Ukraine"

This first-person account, shared by the Internal Displacement Monitoring Centre, follows Kristina from Kharkiv to Lviv after the Russian invasion. It is told almost entirely in her own words.

Illustrations by Brett Jones, produced with Oakbeam Pictures, appear between passages like pages of a picture book. The text carries the story. The images give the reader room to breathe.

Build path: platform-built, with a "Built with Shorthand" footer.

What the scroll earns: restraint. The motion stays out of the way of a testimony that needs none.

What to take from it: the quietest example here may be the most useful. A founder's story, a client testimonial or a mission statement rarely needs more than this.

6. Apax, by Metabole Studio

The sixth example is one of ours. Apax is a Paris architecture practice founded in 1982. Antoine Morizot took it over in 2025, with a clear ambition to modernize its positioning.

The design agency Graphéine had already reworked the identity and the name. Our brief was to build a website that extended that new identity. The site had to move Apax from a traditional perception to a contemporary, confident and selective practice, credible to a demanding international clientele.

Build path: custom. A platform template could not have carried a visual identity designed from scratch by another agency.

What the story earns: a before and after. A repositioning is told as a change of posture, not as a feature list.

[VISUEL ORIGINAL À FOURNIR : screen sequence from the Apax website showing how it signals the shift from a traditional practice to a contemporary one]

Platform or custom code: where is the line?

The line sits where your story has to look like your brand rather than like an article. Below that line, a platform is often the smarter choice. Above it, custom code is not a luxury.

What our audit actually showed

Five of our six examples run on the same no-code platform. That mirrors what dominates the lists you find for this search. The format has gone mainstream through tools.

Those five share a look: a wide column, full-bleed media, text that slides over images. It works beautifully for reports, investigations and testimonies. It is also why so many of them feel related.

Look at what they are: a government feature, three newsroom or nonprofit stories and a sponsored article. None is a company's main website. A homepage must carry its own typography, its own grid and its own motion language, and that is where platform templates run out.

The custom route, explained without jargon

Custom does not mean starting from zero. Newsrooms rely on small open-source libraries to detect where the reader is in the story. One of the best known, Scrollama, lists projects from ProPublica, Politico, The Washington Post, Vox and The Wall Street Journal among its users.

The library only says "the reader just reached step three." Everything else, the design, the transitions and the fallbacks, is written for the project. That is where the budget goes, and where the result stops looking like anyone else's.

Weighing visual builders for a lighter version? Our comparison of Framer and Webflow covers what each handles before custom code becomes necessary.

Here is a pattern we see often with growth-stage companies. They arrive with a deck of newsroom examples and ask for "something like this" on the homepage. The instinct is to copy the format. The better move is usually to keep the homepage tight, then give the long story its own page, built to its own rules.

Run the same check on any example you like

You do not need a developer to repeat our audit. Open the example in a desktop browser and view the page source. Search it for the word "generator." If a platform name appears, you know the production model.

Next, open the same page on your own phone, away from office Wi-Fi. Count how long it takes before the first scene responds to your thumb. If you hesitate, your visitors will too.

Finally, turn on the reduced-motion option in your phone's accessibility settings and reload. A well-built story still reads from top to bottom, with the motion simply toned down. A fragile one freezes, jumps, or hides its text.

Three checks, about ten minutes per example. They will save you from building your brief around a page that only works in a demo.

What does a scroll story cost you in speed and accessibility?

It costs whatever extra script and motion it adds to a page that may already struggle on phones. And it can shut out visitors who have asked their device to calm motion down.

The mobile baseline is weaker than most teams think

According to HTTP Archive (2025 Web Almanac, Performance chapter), 48% of mobile websites pass all Core Web Vitals, compared with 56% on desktop. Most mobile sites already fall short before anyone adds a single scroll effect.

The same chapter tracks Total Blocking Time, the stretches when a page ignores the user. According to HTTP Archive (2025 Web Almanac), the median on mobile reached 1,916 milliseconds, up 58% year over year. Every animation library you add lands on that pile.

One more figure from that chapter matters directly here. According to HTTP Archive (2025 Web Almanac), 40% of mobile pages contain non-composited animations. Those animations change layout instead of just moving layers, which causes visible jank.

Motion sensitivity is not an edge case

Scrolling itself is essential. Most of what we bolt onto it is not. The W3C (WCAG 2.2, Success Criterion 2.3.3) names parallax scrolling as a common non-essential animation. For people with vestibular disorders, it can trigger dizziness, nausea and headaches.

In the U.S., the legal floor is rising too. The Department of Justice rule under Title II of the ADA sets WCAG 2.1 Level AA for state and local government sites. After an April 2026 extension, large entities must comply by April 26, 2027.

That rule targets public bodies, not private brands. But it also covers web content that contractors build for them. For any studio or agency working with the public sector, a scroll story without a reduced-motion fallback is now a liability. Our guide to website accessibility compliance goes deeper on the standards.

A pattern shows up in many audits of narrative sites. The page looks flawless on the designer's large screen, and that is where it gets signed off. Real visitors meet it on an older phone, with motion reduced, sometimes through a screen reader. Sign-off has to happen on the worst device in the room.

Three ways brands misread a great example

Treating a newsroom budget as a template

What brands often miss is that a great investigation rests on months of reporting. The instinct is to copy its structure for a product launch. In practice, the brand has a positioning statement and three product shots. The format has to fit the material you actually own, or the gaps become visible at every step.

Choosing the example for its effect instead of its job

Every example in this list has one job. Pacing, proof, a clock, a voice. A common mistake in briefs is to collect references because they look striking. The instinct is to stack them. The better move is to write one sentence per reference: what this page achieves for its reader. If you cannot write it, drop the reference.

Forgetting the visitor who is ready to buy

A long scroll story is a gift to the curious reader. It is an obstacle to the one who already decided. We see this often on B2B sites with an editorial homepage. A qualified prospect scrolls for a minute, looking for the contact link. Keep a visible way out at every stage of the story. Our approach to custom web development starts from that principle.

Questions people ask about scrollytelling websites

What is a good example of scrollytelling?

A good example is a page where scrolling advances the meaning, not just the pictures. Stuff's lockdown timeline is a clear case: the date counter climbs as you read, so the passing of time becomes something you feel. If you could remove the motion and lose nothing, the page was decorated, not told. That simple test separates real scrollytelling from scroll-triggered effects.

Why do scrollytelling quotes vary so widely?

Because "scrollytelling" covers anything from one animated section to a fully custom narrative page. On our projects, a dedicated section inside an existing site typically starts around €8,000 to €15,000. A demanding full page usually lands between €25,000 and €60,000. The spread comes mostly from visual production: illustration, 3D, video. Our breakdown of immersive website cost explains each line.

Can you build scrollytelling in Webflow or Framer?

Yes, for moderate effects. Both handle scroll-triggered reveals and simple sequences without code. The limits appear when several elements must stay in sync or the story needs custom data visuals. They also show when performance on mid-range phones becomes critical. At that point, a developer working with a dedicated library is usually cheaper than fighting the builder.

Is scrollytelling bad for SEO?

Not by nature. Search engines read text, so the risk comes from stories whose words only exist after JavaScript runs. Ship the narrative as real HTML, keep each step's text readable without animation, and give the page a clear heading structure. Then measure Core Web Vitals on mobile, because a slow story loses rankings and readers alike.

Should scrollytelling live on the homepage?

Rarely in full. A homepage serves visitors with very different intents, and many want the contact page within seconds. Most brands do better with a short scroll moment on the homepage and the full story on a dedicated page, linked prominently. That page can then run longer, be shared on its own, and rank for its own topic.

How do I brief a studio on scrollytelling?

Start with the story, not the references. Write five sentences: the situation, the tension, the turning point, the proof, the outcome. Then attach two or three examples and say what each one does for its reader. A studio can price and plan from that. A folder of twenty screenshots only describes a mood.

Pick the example that teaches you something, not the one that dazzles

Six pages, two build paths. Five of these stories were made with a platform, and they show how far that route can go for reports, campaigns and testimonies. One was built from scratch, because the site had to carry an identity no template could hold.

That is the real decision behind any scrollytelling website. Not which example looks best, but which production model fits your story and your brand. Write the story first. Run it through the three questions. Then choose the lightest build that does it justice.

The best scroll story is the one your visitors finish, on whatever device they happen to hold.

Alan Chevereau, SEO consultant. He works with Metabole Studio on content strategy and search visibility, in English and French.