Preparing your video for scrub on scroll

To use a scroll-based scrub effect with a video, it’s important that the video is properly prepared. Specifically, the video must be encoded in a way that allows precise access to individual frames. This is typically achieved by ensuring the video contains keyframes. These are full image frames that video players can jump to directly. Without them, the scrub effect won’t work smoothly—frame navigation may lag, appear choppy, or fail entirely.

When a user scrolls down the page, the scrub code calculates how far they’ve scrolled and maps that distance to specific frames in the video. It then displays the corresponding frame in real time. This creates the illusion of a fluid, scroll-driven animation.

However, most standard videos—especially those encoded for streaming—aren’t suitable for this type of interaction. They often include keyframes only every few seconds, which makes precise scrubbing impossible. Instead of jumping directly to the correct frame, the video player must decode several frames first, leading to performance issues and visual artifacts.

To make your video compatible with scrub-based animation, you’ll need to re-encode it with the correct settings. This usually means:

Setting a keyframe interval, for example using HandBrake with the keyint=10 parameter. This defines how frequently keyframes are placed in the video. A lower value (e.g., between 1 and 10) improves precision for scrubbing, though it increases file size.

Lowering the resolution and bitrate to keep the file size manageable, since videos with many keyframes tend to be larger.

Exporting the video in a web-friendly format, such as MP4 using the H.264 codec, to ensure broad browser compatibility.

Refer to the screenshots below for example settings in HandBrake that will help you create an optimized video for this purpose.

You can choose a preset to start with, because the video will already be a bit larger because of the keyframes we choose for 720p video.

Make sure you check these boxes to optimize the video for web.

Use a keyint code with a number between 1 and 10. The value depends on the length of the video and the scroll distance. A lower number means more frames and a bigger file-size.

Updated on: 08/09/2025