Video Scroll
Add and customize a scrolling video section
Note: This is a new feature available to our beta testers, if you'd like to apply to become a beta user please reach out to [email protected]
In this lesson:
  • What is a Video Scroll?
  • How Video Scroll Works
  • Adding a Video Scroll Section
  • Uploading a Video
  • Customizing a Video Scroll Section
  • Adding Elements
  • Troubleshooting

What is Video Scroll?

Video Scroll has been a trusted technique for top brands to produce compelling product landing pages and visual stories.
In most applications, this is done using a complex process involving a combination of 3D software like Cinema 4D/Blender, After Effects, and the Bodymovin plugin — however, we've simplified the process.
Now in Vev, you only need to upload your custom video. That's it.

How Apple uses Video Scroll

Apple continuously creates world-class product landing pages using the Video Scroll technique. This technique helps to hype the product as well as display main features in an attractive and sleek way.
You've probably seen the infamous example of the AirPods Pro landing page while lurking around the web and wondered how it was achieved.
If you examine more closely, the page is actually a collection of keyframe images from a video. This has both its pros and cons — the main pro being that the images are crisp and clear to the users, the con is that it significantly weighs down the page with each image.

How The New York Times uses Video Scroll

Video scroll can be a powerful storytelling technique and no one does it better than The New York Times. The NYTGraphics team has really adopted this approach as one of the main tools in their toolkit.
If you are an avid reader of their articles, you've seen this technique used as an explainer to certain stories. For example, 'This 3-D Simulation Shows Why Social Distancing Is So Important'.
Hot-Tip: If you are considering using Video Scroll, make sure you produce a custom-crafted video to fit this feature. Don't let your content fall flat with your audience!

Adding a Video Scroll Section

Note: Currently this feature is only available to beta-testers, please reference the detailed instructions sent separately to gain access and add this feature to your project.

Uploading a Video

Double-click the Video Scroll Section to open the parameter options, then click on the 'pen' icon to open the Video Library and upload your custom video.

Video specifications

One of the major pain points with a feature like this is page speed and performance. To help solve this, videos are limited to 30 seconds in duration and optimized to display at 720p HD. This will keep the video aspect ratio crisp for audiences and result in a great page speed score.
When uploading, any video beyond 30 seconds will result in an error message and will not be available for the Video Scroll section — however, the video will still show in the Video Library.
Hot Tip: 30 seconds not enough? Use Video editing software like Premiere Pro to cut the video and upload multiple sections. Be careful not to go crazy, too many videos can significantly impact performance.

Customizing a Video Scroll Section

Double-click the Video Scroll Section to reveal the Customization Menu with the following parameters.
Parameter
Description
Start video when: It is visible
Start playing the video when it’s visible in the viewport
Start video when: Section starts to be visible
Start playing when the section is in the viewport
Sticky position
Make the video ‘stick’ to a position. You can define a fixed distance that it’ll stick to. It's currently possible to have it ‘stick’ to a fixed distance to Top or Bottom.
Smoothing percentage
This enables ‘easing’ on video scrubbing, by adding acceleration to the video. You'll notice in certain cases the video scroll will continue after you scroll based on the acceleration.

Adding Elements

Similar to Scrollytelling Image, you'll be able to add elements such as text inside of the section in order to reveal them on page scroll.
This will allow you to achieve a similar effect as Apple and The New York Times when text enters into view.
First, you need to toggle sticky positioning to be on, this will allow the video to stay in place as text elements further down on the page scroll into view.
In the Design Editor, the video will appear as a regular section if you select sticky positioning and increase the height of the section (for ex. 5000px) a new black area will appear.
In this black area of the same Video Section, you can place elements that will then appear into view.
Hot Tip: To get your element position just right try using a combination of setting an origin and playing with the x, y position. It may take some tinkering but so worth it!

Troubleshooting

Can I upload an HD or 4k quality video?
You can upload an HD or 4k quality video, however, since we want to translate the best experience on the web the renderer will automatically downsize the video to 720p in order to achieve the best page speed score possible.
My video doesn't look great on mobile, how can I make it better?
Video scroll is a great desktop experience and most of the time it can translate to tablet and mobile well. But if you are really looking for that great experience you can :
  • Produce a mobile-only video specific to that experience
  • Turn your mobile experience into the regular scrolling page with images. In the Apple Airpods example, you'll notice at large breakpoints and on mobile the experience changes to just static images.

Submitting Feedback

As we are testing this feature in beta, we need all the input we can get!
There are two ways to submit your feedback
In Discord:
  • Message our team your username and we will add you to a private beta group to submit feedback and share knowledge with other beta users
In the Roadmap:
  • Create an account and use the submit feedback button to describe your feedback
Remember, attaching videos and screenshots will help out a ton.
Last modified 2mo ago