How to Build a Scrollytelling Website in Vev

If you’re looking to bring an immersive, cinematic feel to your website, you’ll want to get familiar with scrollytelling.

A combination of “scrolling” and “storytelling”, scrollytelling is an umbrella term for web design techniques combining scroll-triggered interactivity with rich multimedia elements as readers move through a website.

Scrollytelling can be applied to almost anything—from editorials and reports, to year-in-reviews, and landing pages. Producing highly engaging experiences, scrollytelling goes a long way to “lighten” long-form content and keep readers scrolling through your site.

While it all sounds fancy, no-code web creation tools are allowing more creative teams to scale scrollytelling without the traditional timelines, budget or developer resource. To show you just how easy it is, we’ve broken down how to build a scrollytelling website in Vev without coding a thing.

The No-Code Scrollytelling Effects We’ll Be Using

• Scrollytelling Image—Create fades and scrolling text effects between full-width image backgrounds.

• Scrollytelling Video—Bring a New York Times cinematic feel to your story (check out our bespoke Scrollytelling JWPlayer component too!).

• Scroll-Triggered Animation—Use our animation presets to bring any text, image, video, 3D, or graphic element to life.

• Scroll Speed—set different elements of your design to scroll at different speeds (and directions) to one another.

Click the eye icon or hit “P” on your keyboard as you design in Vev to preview your work as you go—great for reviewing the flow of your animations and getting a sneak peek at your living, breathing creation.

When you finish your Vev masterpiece, publish it to the web with us or connect an existing hosting to easily add it to your existing website.

Build a Scrollytelling Website in Six Steps

Step 1: Add a Scrollytelling Image

Open up a fresh Vev project, navigate to the + Add Menu (or press shortcut: M), and search for “Scrollytelling”. From here, select the “Scrollytelling Image” option and click to add it to your canvas. You need at least two scrollytelling sections back-to-back to get the desired effect, and these will be added automatically for you.

To change your background image, select “Main Image” and then “Change image” from the right-hand Style panel. Then either upload your own image or search for one from royalty-free libraries Unsplash and Pixabay.

From the same background menu, you can also add a colored overlay by selecting “add layer”, selecting the fill option, picking a color and adjusting the opacity. For extra wow factor, double click the scrollytelling section to open the configuration modal and add a zoom effect. You can also adjust the transition between your scrollytelling sections from here.

Step 2: Play with Scrollytelling Video

Video scrollytelling can lend an immersive cinematic feel to your web experience when paired with text, and it’s a technique that the New York Times love to use in their long-form features.

Heading to the Add menu once again, search for and select “Scrollytelling Video”, and add it to your canvas. To upload your video, simply double-click on the section to open up the configuration modal. From here, you can upload your video and adjust video settings, including show/hide video control and loop, as well as the transition between scrollytelling sections.

With the foundation of your video scrollytelling section set, you can now start adding content to the foreground. To really tell your story. Simply add a textbox to your canvas, enter your copy, and apply styling. Your text will now slide across your fixed video background as people scroll down your page. You can apply the exact same steps to a scrollytelling image section too.

Step 3: Make a Video Play on Scroll

Ever wanted to make videos play on scroll like on an Apple product page? Just head to the Add menu and select Vev’s Video Scroll component.

By default, this will be added to your canvas as an element, but just hold down the Option or Alt key as you click on the canvas to add it as a section. Once you’ve uploaded your video, define its length to change the playback speed from start to finish — the longer the section, the slower the video will be. You also have the option to “offset” the video if you want the scroll-activated progress to start or finish at a specific point.

Step 4: Animate Any Element on Scroll

Vev’s animation tool lets you get really creative with scrollytelling, letting you easily add scroll-triggered animation presets (as well as custom ones) to any element on your page.

Simply select the element you want to animate, then navigate to the Addons tab in the right-hand style panel. Search for “Animation” and apply it. The animation settings modal will open allowing you to select a trigger. Just select the drop-down for “scroll”, click “add animation”, and browse the available presets to add to your element.

Step 5: Make Elements Scroll at Different Speeds

Scroll speed is an Addon that can be attached to any element to control how quickly it should move on scroll. Just like an animation, select your element, head to the Addons tab, select “Scroll Speed”, and apply it.

You can then customize speed from the configuration modal. By default, this is set to 100% — any value below this will cause the element to scroll at a slower speed; any value above it will make the element scroll in the opposite direction. To get the most out of this Addon, try mixing a variety of different scroll speeds to create a “scattering” effect.

Step 6: Scale Up Images on Scroll

Give extra visual emphasis to images and shapes in your design with a scroll-triggered zoom effect. Just select an element, head to the Addons tab,and apply the Scroll Zoom Addon.

With the configuration modal open, it’s time to get creative with your scaling. You have the option to expand the element outside of its container — for example to scale an image to the full-width of your page. Leave this unselected if you just want your element to scale to fit its defined container size.

So have a play! Using a variety of these scrollytelling techniques throughout your website can help produce a really engaging and memorable experience.

Scrollytelling 101

Dive into the design and narrative techniques behind the web's most engaging storytelling.

Read Guide.