How to Use Scrollytelling to Enhance Long-Form Content

April 26, 2022

Words by Parker Tinsely

Orange, Amber, Font

Scrollytelling has become a mainstream term to describe the fusion between storytelling and scrolling on the web. And just like the web itself, it has evolved in complexity over the years to be more than just a single technique.

Personal computer, Interior design, Window, Table, Desk, Comfort, Lamp, Laptop, Typing
Material property, Light, Product, Lighting, Art
Personal computer, Interior design, Window, Table, Desk, Comfort, Lamp, Laptop, Typing

The Scrollytelling Spectrum

Scrollytelling today is actually not one singular technique but a number of features or interactions, which combined, create a compelling narrative that unfolds as you scroll. When you scour the internet, you’ll most likely see one or more scrollytelling techniques used in anything you come across.

For the sake of argument, we are going to divide these techniques into three buckets: beginner, intermediate, and advanced. Then, we will break down how these techniques are achieved, what’s happening in the background, and how you can use no-code tools like Vev to help you accomplish it.

Beginner Scrollytelling Techniques

The scrollytelling piece that started it all Snow Fall: The Avalanche at Tunnel Creek from the New York Times is a great use of audio and visual assets to create a rich, multimedia experience. This piece serves well to display the basic scrollytelling techniques like:

  • Parallax image and text scroll
  • Sticky position

Using these two techniques is the simplest way to build your first scrollytelling experience.

Vev’s Scrollytelling Editorial Template

Parallax image and text scroll

This effect is common in scrollytelling experiences and takes advantage of certain CSS properties like background-attachment: fixed which sets the image to be fixed to the overall container or div. Since other elements like text are included within the div it can also create the scrolling text effect depending on the height you set.

How can I build like this?

Most modern no-code tools will allow you to achieve these same effects, though with differing levels of ease.

For Vev, we have tried to simplify these two techniques as much as possible with our Image Parallax Section and Sticky Position addon, which is as easy as adding to your canvas or applying to a specific element.

Sticky position

As scrollytelling masters put it:

Sticky positioning is the unapologetic love child of position: relative and position: fixed

When you see elements that follow you down the page as you scroll, while other elements scroll naturally, they are most likely using the CSS property position: sticky.

It could be argued that this is an intermediate technique since you’ll need to do some experimentation to understand when the sticky element needs to be, well, un-sticky. But with trial and error, you can figure it out pretty easily.

How can I build like this?

Most modern no-code tools will allow you to achieve these same effects, though with differing levels of ease.

For Vev, we have tried to simplify these two techniques as much as possible with our Image Parallax Section and Sticky Position addon, which is as easy as adding to your canvas or applying to a specific element.

Material property, Wood, Font

Intermediate Scrollytelling Techniques

Diving a bit deeper, AMP’s Breaking the Status Quo shows more of a complex scrollytelling technique, animations on scroll, that serve to not only unfold the narrative but create a distinct design feel to the entire piece.

Also, who said scrollytelling had to be vertical or even just images? An interesting way to mix things up is to use techniques like a horizontal scroll or even a video progression scroll.

Animation or interaction on-scroll

Oddly enough, this technique has been around longer than sticky position and parallax image but designers and developers have found new, fun ways to use it to bring content to life.

Animation (or interaction) on-scroll is one profound, versatile technique that will animate an element’s CSS properties based on the percentage of scroll down the page. Most commonly, it will adjust properties like:

  • position
  • size
  • rotation
  • opacity

When used in combination with sticky position, it can have some pretty interesting effects.

Horizontal scroll

CANALS built by Marcus Brown & Antoine Benoist

This amazing horizontal experience built by Marcus Brown & Antoine Benoist is perfection. With strong visuals of the canals in Amsterdam the historical narrative unfolds as the user scrolls horizontally through the site.

There’s been a heated debate on how hard it is to accomplish horizontal scrolling with pure CSS. Most argue it should be as easy as adding a property like scroll-direction: horizontal; but of course, that property doesn’t exist. However, it’s a bit easier to accomplish with vanilla Javascript and even easier by using a supported library like Locomotive Scroll.

Thankfully more and more no-code tools are supporting this type of layout and building it into their feature-set, making horizontal sites much more accessible to the wider community of web designers.

Video Scroll

Nothing screams immersive like Apple product demos, especially the infamous AirPods Pro site. Clean, amazing flow, and wait—49mb! Builds like this can be tough and while you may think there’s a video in the background of the page, Apple’s technique actually uses over 1000 keyframe images triggered to change as you scroll (hence the large page size).

Most times when we see this effect on the web it’s still actually a magic trick—what looks like a video is a series of images or utilizing libraries like Lottie. So why is this considered an intermediate technique? The team at Vev has made a video scroll element that makes this almost as easy as just dragging and dropping your video.

How can I build like this?

These techniques definitely increase the complexity but with no-code features like animation and interactions, you can achieve the same effect (if not better) than custom code. Plus, you’ll get a visual editor to preview in real-time!

In Vev, to achieve animations on-scroll, you’ll want to use a combination of the sticky position addon and built-in animation tool to create your very own animations or interactions on-scroll.

You can easily create a horizontal site by adding multiple horizontal scroll sections, which automatically will change the scroll direction. Then, placing elements like text and images to appear as the users scrolls left-to-right.

Lastly, video scroll. We’ve actually created a dedicated element for this, all you need to worry about is uploading your video and adjusting the height of your section for it to scroll smoothly.

Advanced Scrollytelling Techniques

Cue the dramatic music. This is where things get, well, advanced.

We are sure you’ve seen those immersive, award-winning scrollytelling experiences on the web. The ones that grip onto your CPU and just don’t seem to let go (or may just cause your computer to crash). There’s no way around saying this, you might need to learn how to code.

But to be honest, advanced techniques can also boil down to one factor—time.

Take this example Millennials are Screwed from HuffPost and Highline. If you really examine it, it is just a masterful execution of the beginner and intermediate techniques we’ve discussed. This is great news since there is nothing standing in your way of creating something like this.

The Future of Scrollytelling

When the New York Times released their revolutionary scrollytelling experience, they may not have anticipated the ripple effects it would have on web design but it’s clear now that scrollytelling techniques have become commonplace.

But with anything, there must be a balance. Do readers really enjoy a long, drawn-out scrollytelling experience? Will Google penalize you for using types of techniques? More and more we are seeing these techniques used deliberately. Instead of a full site, it’s a specific section to highlight a new product, narrative, or service.

Like anything, these techniques have matured over time and designers are understanding how powerful they can be when used sparingly, and with the overall design and narrative in mind.

The Easy Way to Create Scrollytelling Content

Want a quick way to bring scrollytelling to your own projects? Take a look at 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 without coding a thing.

Azure, Rectangle, Triangle
Material property, Atmosphere, Dishware, Grey, Sky

Want More Inspo?

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

Rectangle, 3D, Green
Youtube icon
Linkedin icon
Instagram icon
Facebook icon
Twitter icon

This site was built in Vev © 2021 Vev. All rights reserved.