Immerse and impress your viewers with the seamless fluidity of a scrollytelling video. This engaging format combines storytelling with interactive scrolling, allowing you to present your content in a dynamic and captivating way. Perfect for creating memorable narratives, scrollytelling videos guide your audience through a visual journey, enhancing their experience and keeping them engaged from start to finish.
Note: We recommend that you add two or more Scrollytelling video sections back-to-back to showcase the smooth transition effect, this will allow you to unleash its full potential.
Step-by-Step Guide
Watch our tutorial
Read our "How to Build a Scrollytelling Website in Vev" lesson to get a step-by-step guide!
Read our blog and get inspired by other designers who have integrated scrollytelling video into their web pages. See real-world examples and creative uses of this feature to spark your own ideas. š¤©
Uploading a video to Vev
The video library in Vev serves as the repository for your project. You are required to upload a video file (.mp4, .wav) or a link to a video file (.mp4, .ogg, .webm). Video components draw an HTML5 video element and place the required video files as sources on this element.
YouTube, Vimeo, or 3rd party sources cannot be used in Scrollytelling Video.
From a URL
Double-click the Scrollytelling Video section
Click the pen icon under Upload Video
Select From URL
Give your video a name
Under Video Source select + Add Item
Enter your video URL
Select the video type
Hit save
Once the video has been uploaded, hover over the video then select
Note: The video URL is only meant to be used for videos stored in a file directory. For Youtube or Vimeo URLs, please use their respective components to add them to your project.
Upload a video file
Double-click the Scrollytelling Video section
Click the pen icon under Upload Video
Select Upload Video
Choose the file from your PC
Styling a Scrollytelling Video
Clip content: Toggle to hide the content that goes beyond the section's edges
Resize to fill vertically: Click to set the section's height to 100%
Background:
Control bar: Change the background color of the video control's bar
Section Overlay: Add an overlay to the Scrollytelling Video section
Text: Change the size and color of the Play icon
Margin: Add margin to the Play icon
Padding: Add padding to the video control's bar
Icons:
Set custom shape: Replace the default icons with a shape or a custom SVG
Set custom image: Replace the default icons with an image
Aspect Ratio
Specifying and locking the aspect ratio of a Scrollytelling Video section will allow you to adjust and resize it but still maintain the overall relationship between height and width.
Tip: Right-click the aspect lock to open up a menu of popular aspect ratios.
Configuration options
Parameter | Description |
Duration | Animation time in milliseconds. (350 ms is recommended) |
Easing | Select which easing function you want to use for your Animation |
Upload video | Upload your video |
Disable Tracking | Toggle to make the video run only once |
Show video controls | Toggle to show the video controls bar |
Don't loop video | Toggle to stop sending tracking events |
Control placement | Choose between "Top right", "Top left", "Bottom right", "Bottom left" to place your video controls |
Use Multiple Scrollytelling Videos
Smoothly transition through your story with multiple scrollytelling videos.
To create this example:
Add a scrollytelling video section, and select your video
Double-click the section to bring up the configuration settings and change to the settings below:
Add a text box with a H1 heading
Add animation to the text box; select load animation with presets āfade inā and configure with the below settings:
Duration: 0.9 seconds
Delay: 0.3 seconds
Movement (?): easeOutQuad
Opacity: start = 0 / end = 1
Add your next scrollytelling video section and use the same settings as the above for uniformity and ease of transition across your video sections. The example above is a collection of three scrollytelling video sections.
Organizing Scrollytelling Video sections
Once a Scrollytelling Video section has been added it'll appear in the layers panel, you can drag it above or below other sections to place it where you need it in your project. Follow the steps below to learn how to do it.
Select the section in the layers panel
Click and hold it, then drag it above or below the section you want
FAQs
Q. Why is my video not playing on mobile devices?
On iOS devices, when they are in low-power mode, it will not allow videos in Safari to autoplay without the userās input. This impacts background videos, and Safari displays the play button icon.