Scrollytelling:

The Secret to Immersive Websites

Scrollytelling is a powerful technique for telling immersive stories on the web—using a combination of interactive content elements that elevate story arcs, improve readability, and sustain reader interest.

Start Building — It's Free

Get a Demo

What is Scrollytelling?

The portmanteau of “scrolling” and “storytelling”, scrollytelling is a web design format used to tell dynamic, multimedia stories that unfold as readers scroll through a website. Popularized by editorial from the likes of the New York Times and Wall Street Journal, scrollytelling underpins some of the most immersive and engaging content experiences on the web.

Scrollytelling websites dynamically combine a variety of content elements—from video, images, 3D models, charts, and infographics, to text and animated typography. It breathes instant life and movement into any content, and actively involves readers in what they are consuming—creating a sense of control, exploration, and discovery.

The Power of Scrollytelling

If you’re a marketing manager or content strategist, you know how important audience engagement is. Operating in an attention economy where the average human attention span is about 8 seconds, you need to break through all the other digital noise and offer something that captivates your audience immediately.

Scrollytelling can do all that and more. It has emerged as a powerful way to present content and create dynamic narratives that actively engage audiences. Most importantly, it allows users to interact with content in a way that wasn’t possible in the not too distant past.

Unlike traditional linear website experiences, scrollytelling allows readers to scroll up and down—even across—and click on buttons or icons to reveal additional information and interactions. They control the narrative by navigating at their own pace and taking the time to explore every single part of the story, which in turn produces a more personalized experience.

"Scrollytelling makes your reader an active participant in your content."

How to Use Scrollytelling on the Web

There aren’t any real rules when it comes to scrollytelling, but as the name suggests, it works best for telling stories—blending sections of text with rich visual media. This makes it a popular choice for commercial departments and content studios looking to create slick marketing and brand experiences.

Editorial

Reports and Data Storytelling

Product Pages

Applications are wonderfully broad: you can use scrollytelling for long-form editorial, native advertising or advertorials, interactive annual reports, campaign landing pages, data visualization presentations, product teaser pages, and more.

Striking Scrollytelling Examples

As such a creative and versatile format, scrollytelling can effectively be used on any website—you don’t have to look too far to spot a website using one or more scrollytelling elements. We’ve seen some great scrollytelling examples for photo essays, animated comics, interactive presentations, and even portfolios.

Popular Scrollytelling Techniques

Scrollytelling isn’t a singular, isolated web design technique—it’s a collection of multiple techniques and tools that together create interactive website experiences. This is what makes scrollytelling such a fun and exciting choice for web content; there are so many ways to play around with it. Here are a few of the most popular scrollytelling techniques you’ll want to experiment with.

Parallax Scroll

Background elements move at different speeds to foreground content, creating instant depth and perspective. Take this to the next level by using a full-width background video.

Show / Hide

Engage readers with elements that appear or disappear on click. Great for pop-ups and quizzes.

Scroll Progress Indicator

Make UX experts and your readers happy by adding a scroll progress bar to indicate the length of your content.

Watch Our Scrollytelling Masterclass

Get an in-depth look at how to build your very own scrollytelling website without writing any code. In this masterclass you’ll get a walkthrough of popular techniques and scroll-triggered animations to elevate any visual story, landing page, or web experience.

Full Tutorial

How to Build a Scrollytelling Website

Scrollytelling looks complex to build, which is partly why it feels so premium and impressive. If you take a peek at the code behind scrollytelling websites, you’ll be instantly vindicated; it’s next-level stuff.

As a result, many creative teams and agencies believe scrollytelling is beyond their reach—it would require an eye-watering budget, endless amounts of time, and a taskforce of design-genius developers to ever make it happen.

We built Vev to change that. With a pre-coded library of scrollytelling elements that can be easily customized and moved around a visual canvas, creative teams can design and publish slick scrollytelling web experiences in a matter of hours.

You can publish your Vev creations anywhere and embed them into any CMS to easily bring dynamic scrollytelling elements to existing sites.

Start Creating — It's Free

"Vev is enabling a new generation of creatives to craft and publish interactive visual stories without knowing any code."

Deconstructing a New York Times Web Editorial

The New York Times’ interactive piece Snow Fall: The Avalanche at Tunnel Creek is widely regarded as the OG scrollytelling website—blending visual assets and audio to create a rich, multimedia experience. We had a go at recreating one of their more recent editorial pieces in Vev—without coding a thing.

Watch Tutorial