Using the Scrollytelling Video

Tell beautiful scroll-based video stories

Diego Muralles avatar
Written by Diego Muralles
Updated today

Immerse and impress your viewers with the fluidity and flow of a scrollytelling video.

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.

Adding a Scrollytelling Video

  • From the top menu bar, click on the Add Menu (Shortcut: M)

  • Search for and select Scrollytelling Video

  • Select it

  • Hover over the canvas and click where it says Add section here

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 elements draw a 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 elements 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

  • Spacing top: Add padding to the top of the Scrollytelling Video section in pixels or % to keep spacing between sections

  • Spacing bottom: Add padding to the bottom of the Scrollytelling Video section in pixels or % to keep spacing between sections

  • Width: The width of a Scrollytelling Video section can't be altered, it'll always be set to cover the 100%

  • Height: Set the height of the section in Pixels, % or set it to Auto so that it grows as you add content to it

  • Min H: Sets the minimum amount of height pixels a Scrollytelling Video section can be. A red stippled horizontal line inside your section will reflect the minimum height

  • 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:

    • Controlbar: 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




Animation time in milliseconds. (350 ms is recommended)


Select which easing function you want to use for your Animation

Upload video

Upload your video

Show video controls

Toggle to show the video controls bar

Don't loop video

Toggle to make the video run only once

Disable Tracking

Toggle to stop sending tracking events

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


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.

Did this answer your question?