The Scrollytelling Tools Behind Great Narrative Content

Digital storytelling has come a long way from a page of text with a few images.

A diverse range of modern design techniques are helping more brands and publishers craft stunning narratives—the most popular undoubtedly being scrollytelling. Weaving together text, visuals, and motion, scrollytelling tools have the power to elevate content to something of an art piece, and put visitors at the center of the narrative. Thanks to a new breed of web creation platforms, it's also now easier than ever to put them into practice.

How Do We Define Scrollytelling?

Scrollytelling is the cheerful portmanteau of “scrolling” and “storytelling". This term has come to signify a cluster of powerful web design techniques that we'll explore in more depth below. Together, these scrollytelling tools help creatives tell dynamic stories that unfold as readers scroll through a website—making them extremely popular for long-form web editorials and journalistic features.

The Importance of Scrollytelling Tools for Telling Digital Stories

We’ve all seen articles, landing pages, and websites that follow the same static text and visual layouts. They present information in ways that are easy to read but offer no surprises. Luckily, modern web design has opened up new avenues of creative expression to enhance the "experience" of a piece of content.

Scrollytelling tools in particular transform this experience from being passive to extremely active, with scroll-triggered interactions and animations giving readers direct control over what information they explore and pursue further as they move through a digital story.

Whatever the narrative, scrollytelling tools turn long-form content into immersive experieneces, which is why they are used by multiple different creators for different purposes.

• Companies can use scrollytelling to create centerpiece branded content, such as annual reports and advertorials. 
• News publications utilize scrollytelling to inject interactivity and intriegue into long-form features.
• Non-profits create in-depth scrollytelling campaign pages to spotlight the issues that matter to them.

Scrollytelling Tools To Start Using

Scrollytelling tools can be used to visualize information, create slick transitions within content, and weave reader participation throughout your story. Let’s take a look at some of the most popular scrollytelling tools elite publishers like The New York Times are using to craft engaging digital narratives.

Horizontal Scrolling

Vertical navigation is the conventional way to consume digital stories. The scrollytelling tool "Horizontal scrolling" offers a way to shake us out of this familiar pattern by moving text and visuals left-to-right. This is a great trick to use for chronological storytelling—think timelines or establishing facts—that work more naturally in a linear format.

You can weave horizontal scrolling sections throughout your piece or create an entirely horizontally scrolling experience. For the more cautious, this example from WWF made in Vev shows how a single horizontal scrolling section can be used to draw attention to a specific part of the story, as well as offer reprieve from the verticality of the rest of the page.

Sticky Position

Scrollytelling often employs visual effects to highlight text or images. The sticky position effect is one of the best scrollytelling tools to bring focus to specific elements or information, as well as to contain a section and separate it from other parts of the content.

As someone scrolls, an element with a sticky position add-on moves to a specific spot where it remains anchored. After they’ve scrolled a specific distance further, it’s released from its position.

In this Vev-built sustainability report, Service Now moves text and a headshot of Lynelle Cameron to a fixed position in the left column of this Q&A. The text in the right column then scrolls against it. Seeing Lynelle’s photo for the entirety of this interview maintains a strong connection between her and her thoughts on sustainability.

Video Scroll

Scrollytelling often takes a multi-media approach. Videos not only compliment the overall visual design, but can add context to the information being communicated. In other words, using video scroll—one of the most "wow" factor scrollytelling tools—embraces the “show, don’t tell” philosophy that visual storytelling is built on.

An example of video scroll can be seen in this promotional website built in Vev for The North Sea, a disaster movie based around the collapse of the world’s oil rigs. There’s a sense of tension in this dark and monochromatic design, in keeping with the tone of this film. Clips from the movie, with text scrolling over these scenes, provide further information as to what this movie is all about.

Parallax Scrolling

Parallax scrolling is one of the most popular scrollytelling tools. This effect creates the illusion of three-dimensionality by varying the rates that text and visuals move against each other. It’s an effective technique in scrollytelling, making it possible to deliver content at a careful pace that’s visually interesting.

This website made using Vev for the Norwegian branch of the Salvation Army has a soft touch with stylized illustrations and writing that speaks to what they do in helping people. Throughout the design there are layered elements and parallax scrolling. It has a sense of physicality and personality that connects it with the real stories that are being told about their work, all thanks to scrollytelling tools such as parallax scroll.

Scroll-Triggered Fade

Fade-ins are another popular technique in scrollytelling that materializes writing and visuals as a visitor moves through a page. This is an effective scrollytelling tool used to break up content, which prevents it from becoming one long and tiring block. This technique also adds movement and fluidity to the user experience, creating a more engaging experience.

The World Wildlife Fund Canada utilizes fade-ins throughout this awareness campaign piece to reveal important facts about their efforts in helping the environment. This works well in highlighting information and injecting life into the user experience.

Scroll-Triggered Animation

Another scrollytelling tool that makes an impact is scroll-triggered animations. They set text and visuals into motion, reward visitors as they move through a story, and help push them to read to its conclusion.

You’ll find several eye-catching scroll-triggered animations in this scrollytelling website dedicated to the architect Walter Gropius. At the beginning of the design, moving down zooms out on one of his minimalist buildings, with text then blinking into place. The scroll-triggered animations create a sense of rhythm, guiding visitors in moving forward and learning more about Walter Gropius’ work.

Scroll Progress Indicator

A scroll progress indicator shows visitors the distance they’ve traveled, indicating how much content remains on a page. You’ll find scroll progress indicators generally at the top or on the sidebar of a design. Since scrollytelling often rolls out a substantial amount of content, having a scroll progress indicator will show your visitors exactly where they are and encourage them to finish the journey. 

This 2021 annual report from the non-profit organization the Human Rights House tells the story about their efforts in helping people across the globe. Heading the website is a scroll progress indicator in the form of a thin dark line which changes upon scrolling up or down the page. Built with Vev, this is a ready-made scrollytelling tool that’s easy to integrate into any layout.

Get Started with Scrollytelling Tools

Creating immersive stories isn’t only for those who know how to code. Whether you’re just getting started as a web designer or have years of experience, Vev’s library of pre-coded scrollytelling components provide all the tools you need to do a great story justice. You can publish your work anywhere on the web when you're ready—either with Vev or through your own CMS.