8 Scrollytelling Examples Worth Exploring (And What Each One Teaches You)

Some of the websites turn scrolling into something closer to reading a comic book or watching a slow reveal. That’s the exact thing behind scrollytelling examples, where pages move with your mouse wheel or swiping your trackpad actually changes what happens on screens, instead of just moving the text-related content. In this blog, I give 8 sites of the best scrollytelling websites currently on the internet, and interestingly, all the websites are worth visiting. Before that:

What Is Scrollytelling?

Scrollytelling is a style of web design in which scrolling can trigger some of the animations, reveals new contents, or advance a story. Instead of a static page from top to bottom with text, it gives an experience. It turns a passive scroll into an active one.

When researching these types of websites, I noticed they will use it on single-topic curiosity projects to full data investigations. Think of this as a running list of interactive storytelling websites you can actually explore yourself, not just a screenshot.

8 Scrollytelling Website Examples Worth Exploring

These are the kind of scroll-based interactive websites that don’t need a huge budget or a newsroom behind them. One person with good knowledge and a scrollbar is enough.

1. The Deep Sea

Visit: https://neal.fun/deep-sea/

Neal Agarwal’s project drops you at the ocean surface and lets you scroll into the ocean bottom. As you scroll through the bottom, the background becomes darker, and creatures appear at the actual depth where they live. On this website, you can see from dolphins near the surface to anglerfish and shipwrecks thousands of meters down.

It’s interesting because the depth is the story. No narrator is explaining the ocean to you. You’re just going with them, and the darkness does the emotional work. If you like this type of project, Curiouxify has a whole list of sites like Neal.fun worth exploring.

2. If the Moon Were Only 1 Pixel

Visit: https://www.joshworth.com/dev/pixelspace/pixelspace_solarsystem.html

Josh Worth shrinks the moon down to a single pixel, then scales the entire solar system to match. When you scroll sideways, you will pass the tiny dots that represent planets separated by huge stretches of space.

When scrolling through these, I was thinking about how badly humans misjudge astronomy. This one also shows how effective horizontal scrolling can be when the content genuinely calls for it.

3. Parable of the Polygons

Visit: https://ncase.me/polygons/

This one was a playable post rather than a straight scrollytelling piece, and the distinction matters. It was built by Vi Hart and Nicky Case. As you scroll through the site, you don’t just watch shapes move; you drag them yourself, running small simulations of bias and segregation between blocks of triangles and squares.

Each section builds on the last one’s lesson instead of just adding more information. It is one of the best examples of scrolling combined with genuine interactivity rather than just scrolling that triggers animations.

4. A Visual Introduction to Machine Learning

Visit: https://r2d3.us/visual-intro-to-machine-learning-part-1/

R2D3 was built to understand decision trees using a dataset of homes in New York and San Francisco. It explains simple concepts with one concept at a time, with a chart on the right that redraws itself as new data points are introduced on the left.

There is no jargon dump up front. The chart itself teaches before the term for it ever appears. Anyone curious about how interactive web experiences can teach should study this one, importantly.

5. Snow Fall: The Avalanche at Tunnel Creek

Visit: https://www.nytimes.com/projects/2012/snow-fall/index.html#/?part=tunnel-creek

This project helped popularize for the scrollytelling trend in journalism. The New York Times used animated snow, satellite terrain, and video woven directly into the article. When we read today, the pacing still feels careful rather than showy. It’s worth including here for the same reason old websites belong in a piece on net art and web history. It shaped how everything after it was built.

6. The Boat

Visit: https://www.sbs.com.au/theboat/

The illustrator Matt Huynh adapted Nam Le’s short story about a Vietnamese refugee’s journey by boat into a scrolling-based website. It was created for the Australian broadcaster SBS. As you scroll, hand-drawn panels sway like they’re on rough water, wind and thunder play through your speakers, and each animation gives you a thrilling experience. This website proves scrollytelling doesn’t have to be built around data at all. It is one of the best examples I can give you for this article.

7. Built to Keep Black from White

Visit: https://www.nbcnews.com/specials/detroit-segregation-wall/

NBC News tells the story of a wall built in Detroit in the 1940s to address racial segregation, using scrolling maps that shift from 1930 to the present day. The maps carry most of the storytelling weight, with text kept minimal and never blocked from view. It’s a strong example of using scroll-triggered transitions to show change over time rather than just change in position.

8. The Sounds of CDMX

Visit: https://pudding.cool/2022/09/cdmx/

The Pudding built this audio-visual piece around the street vendors of Mexico City; each sound represents each one. A knife sharpener’s pan flute, a tamale seller’s recorded jingle, a garbage collector’s bell. As you scroll, you will notice the animations and sounds in your headphones. It’s one of the more unusual entries here because sound, not just visuals, drives the storytelling, which is very rare in the history of scrollytelling websites.

Types of Scrollytelling

A few common scroll animations and techniques show up across the examples above:

• Scroll-driven animation – elements move, fade, or transform as you scroll, like the darkening ocean in The Deep Sea.
• Scroll-triggered transitions – content swaps or updates at specific scroll points, like the shifting maps in Built to Keep Black from White.
• Horizontal scrolling – used sparingly, but effective when representing distance or sequence, as in 1 Pixel Moon.
• Parallax – background and foreground move at different speeds, adding depth without changing the content.
• Playable, interactive storytelling – the reader affects the outcome directly, as in Parable of the Polygons.

What Makes Good Scrollytelling?

Here is one thing you need to notice about these examples, and that’s habit. They only use scroll effects where scrolling adds meaning. A good example I can say is: imagine the page as plain text. If something important would be lost, the interaction is earning its place. If nothing happens, it’s probably just decoration. Good scrollytelling also respects pacing.

Looking for more examples of interactive storytelling? Curiouxify keeps adding these types of websites, so following this website can only benefit.

FAQ