Scroll Video

Create stunning scrolling video sequences in just a few clicks.

Overview

Element Settings

  • Video File: Select a video file to use for the scroll video sequence. For the optimal performance, it is recommended to encode your videos with keyframe = 1 whenever possible.
  • Transition Speed: Set the speed of the transition between frames. The transition speed is measured in seconds. Default: 8
  • Frame Treshold: Set the threshold for when the next frame should be displayed. The frame treshold is measured in seconds. Default: 0.1
  • Cover: The Background Size. If checked, the video will cover the entire element. Default: false
  • Sticky: If checked, the video will be fixed to the viewport. This is useful for creating parallax effects. Default: true
  • Full (Entire Viewport): If checked, the video will be fixed to the entire viewport. Default: true
  • Use Web Codecs: If checked, the WebCodecs API will be used to process frames. This will result in better performance. Only supported in Chrome. If the WebCodecs API is not supported or frame processing is not complete, the Scroll Video element falls automatically back to method two (See Technical Details). Default: true
  • Debug (Console Logs): If checked, the Scroll Video element will log information to the console. Default: false

Note: In the builder, the WebCodex API will not be used. To see the difference, you can preview the page in the frontend.

Technical Details

The Scroll Video element uses multiple approaches to optimize video animation performance across different browsers. The first method is to use the WebCodecs API, which enables access to all frames in a video for drawing onto a canvas. While this method is highly performant, it may take some time to process frames and is currently only supported on Chrome. The WebCodecs polyfill is not compatible with this application.

If the WebCodecs API is not supported or frame processing is not complete, the element falls back to method two. This approach uses an HTML5 <video> tag to embed the video and modulates the playbackRate attribute to simulate faster or slower scrolling speeds. This method provides smooth animation when the video moves forward, but does not support reverse playback as the playbackRate attribute cannot be negative.

In situations that require reverse playback, the element uses method three. This approach also uses an HTML5 <video> tag and skips to frames directly using the currentTime attribute. However, this method requires videos to be encoded with keyframe = 1, which results in larger files or lower quality videos. This method is also used on mobile Safari browsers, where it performs better than the playbackRate modulation approach.

Note: To achieve optimal performance, it is recommended to encode your videos with keyframe = 1 whenever possible. However, there are still limitations in some circumstances. For example, the Scroll Video element may not work in battery saver mode on iOS due to the way iOS handles videos and battery saving functions.