11 Scrollytelling Examples That Bring Web Content to Life

April 11, 2022

Words by Jeff Cardello

Have a long-form story you'd like to tell? Whether you're crafting a piece of journalism about real events or telling a brand's narrative, present it in a way that's fresh and exciting.

Let's face it, our attention spans are getting shorter and shorter. Most of us don't have the patience to sit through a website that's just a single long scroll of static images and text. To keep us engaged there needs to be action.

That's where interactive elements triggered on scroll—dubbed “scrollytelling”—can make a huge difference. We’ve pulled together some of the most inspiring scrollytelling examples to demonstrate how to build engaging interactive experiences and ensure your readers see everything you want them to.

When to Use Scrollytelling

Scrollytelling makes experiencing content an interactive experience—casting aside the strict grids and boundaries of conventional web design. It’s all in the transitions: text springs into place, images materialize, and there’s always something new that’s revealed as we navigate through a design.

As the name suggests, scrollytelling lends itself to telling an immersive digital story—making it a great choice for long-form web editorials, interviews, and advertorials. Yet, you can apply scrollytelling techniques to breathe instant life and personality into any web project, from landing pages and blog articles, to a company “About Us” page.

Automotive tire, Grey, Wood

[image/graphic relating to above]

A story rich with graphics and interactive content draws viewers in deeper, exciting them with the prospect of what will be revealed next. Your audience doesn’t have to sit idly by and navigate lengthy blocks of text.

11 Incredible Scrollytelling Examples

From parallax images, text animation, and horizontal scroll, there are a ton of different ways to combine scrollytelling techniques to create immersive web experiences. The following scrollytelling examples showcase the variety of ways you can use scrollytelling elements to communicate your ideas.

Material property, Grey, Wall

[image/graphic relating to above]

Mirrows

There’s a lot of excitement around NFTs and their potential uses for artists, musicians, and other creatives in generating revenue for their work. Mirrows sets itself apart by offering NFTs that are interactive to their buyers.

This web design built with Vev, features a beautiful horizontal scroll full of rich visuals and content. There are animations, micro-interactions that trigger audio, vertical marquees of text, and a juxtaposition of font sizes. Every panel reveals something visually captivating.

For something as innovative as NFTs, a web design needs to be equally groundbreaking. Mirrows succeed with a quirky side-scrolling website that gets our attention the moment we land on it.

Covid-19 in Africa

This web report tells the story of the devastating impact of COVID-19 in Africa, and its struggle to recover. As with any report, statistics and data form a big part of the story. By using scroll-triggered animations to present important numbers—instead of burying them in conventional tables or paragraphs—the creator ensures we don’t miss any of them.

In this example, scrollytelling techniques turn a complex, data-heavy topic into something that is accessible and engaging. With dynamic visuals, an infographic approach to reporting, and considered pacing of content, anyone reading this web report can grasp right away the seriousness of what Africa is facing.

The Pudding

The Pudding is all about compelling visual storytelling. This article details an attempt at using artificial intelligence to win a cartoon caption contest for the New Yorker. It’s hilarious to see what the AI came up with. This article is entertaining, but it also has some interesting insights about the use of this technology.

We mentioned the importance of infographics in scrollytelling, and they put together this infographic below in showing how well their captions did. Our eyes hone in on the black dots, showing us where each of these ranked. This is far more compelling than putting this data in a traditional table.

They also include an animated video, showing one of their AI-produced captions being submitted. They fill this scrollytelling article with images and visuals that compliment the writing.

With rich visual and a nice balance between humor and technical information, this scrollytelling piece makes it easy to understand how AI works in a way that’s fun and informative.

Pine Cove

This website for the camp Pine Cove goes big with this layout, with huge visuals, full-screen videos, and bold text all leaping from the screen. There’s a nice use of space, with nothing feeling cramped or too busy.

There’s plenty of vertically scrolled content, but they mix it up with horizontal scrolling. You’ll also find scroll-triggered visuals with text, statistics, and other images materializing and sliding into place, which adds a nice sense of variety.

Norway Salvation Army

Scrollytelling is the perfect medium for telling stories that have a chronology of events. This scrollytelling website tells the story of Julie, her experience with poverty, and how the Salvation Army in Norway came to her assistance.

This story feels like something from an animated feature movie. We’re immersed in Julie’s life through warm graphic illustrations, with different characters appearing in the same background scene on scroll. It humanizes those who are struggling and makes it possible to feel a personal connection with what they’re going through.

WWF Regenerate Canada

Created with Vev's very own no-code website builder, this website for World Wildlife Foundation’s Regenerate Canada campaign starts out with a compelling image and message. This program aims to improve the environment through conservation. While the story is alarming, there’s also a sense of optimism that it’s still possible to make a change.

Each section features a large image, with a call to action that reminds us that it’s still possible to reverse all the environmental effects we explore—that there are still things we can do.

Telling this story visually, and showing the real-world effects of climate change, makes the importance of their message that much more impactful.

Datarock

With a sound that takes influences from both post-punk and modern indie music, Datarock creates music that’s both timeless and feels very of the moment. They begin their website with a hero video, where one of the members interviews himself. We get an idea right away that they do not take themselves too seriously.

This scrollytelling website tells the history of their band, starting from 2005, and is packed with visuals. There are photos, hand-drawn illustrations, embedded videos, as well as several eye-catching scroll-triggered effects. Nothing feels static, with a fun buzz of graphics and images that makes the reader keep scrolling.

Gegen Menschenhandel

This website is the companion to an Austrian Ministry of Foreign Affairs exhibit about human trafficking. The power of this web experience comes from the physicality of its design. There are paperlike cutouts and textures, as well as a z-pattern of layered text that moves as you scroll through it.

This is another example of scrollytelling that breathes a sense of life into its content, connecting it to the real world, and making it far more interesting.

Virginia ACLU

Let’s face it, annual reports can be pretty dry and formal. After all, they have a lot to communicate. Sometimes there’s just no room or time for creative design. This 2021 annual report for the Virginia chapter of the ACLU goes way beyond what we expect of annual reports, and this ambition pays off.

There’s much to love here visually. There’s a beautiful palette of colors. We’re also fans of all of the dynamic effects. Text scrolls by, images shift into place, and there’s parallax scrolling. Almost every bit of movement reveals something that catches your eyes. Scrollytelling is the perfect platform to show all of the significant things they accomplished throughout the year.

Every Last Drop

Visuals again take center stage in this creation by Every Last Drop, which tells the story of water use in the UK through cartoon-style illustrations. There are no huge blocks of text to try and digest. Instead, we learn about water through whimsical drawings. It’s an important message but delivered in a way that’s fun to scroll through.

Apple Watch Series 7

Scrollytelling also works for showing off products. On this website for Apple Watch Series 7, each section dazzles us with visuals. There’s plenty of motion, with watches turning and moving into place. Readers aren’t overloaded with product specs and each block of content has a simple, to-the-point headline.

Apple’s brand voice of sophisticated minimalism touches every aspect of this scrollytelling website, telling us everything we would want to know about this line of watches.

The Easy Way to Create Scrollytelling Content

Want a quick way to apply these scrollytelling examples to your own projects? It's exactly why we built Vev. With our drag-and-drop visual canvas and extensive library of pre-coded scrollytelling elements, you can quickly create and publish immersive web experiences with complete technical and creative freedom.

Atmosphere, Dishware

Get our monthly newsletter straight to your inbox.
You can always unsubscribe at any time.
Privacy Policy

Material property, Dishware, Serveware

Want More Inspo?