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.

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.

Natural landscape, Azure, Font

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.

Background shape, green gradient

Editorial

Background shape, pink gradient

Reports and Data Storytelling

Background shape, green gradient

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.

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.

"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 Our Horizontal Scrolling Masterclass


Get an in-depth look at how to build your very own horizontal scrolling website without writing any code. In this masterclass you’ll get a walkthrough of basic techniques, how to add custom animations and shapes, and how to build multiple sections that create the scrolling effect.

Photograph, Light, Product, Font, Software, Screenshot
Shapes, Yellow, 3D

Feel free to explore and create as many projects as you'd like for free! Then select the plan that's right for you when you're ready to publish.


Let's make the web a more beautiful place, together.

Ready to make something exceptional?

Agencies

Ready to Make Your Own Scrollytelling Website?

Create as many projects in Vev as you like for free. Add a plan when you’re ready to share your story with the world.