After converting a video to a JPEG sequence, you can export a JSON from After Effects and animate the sequence as you scroll down the page.
Full course, plus downloadable assets: https://wfl.io/after-effects-lottie
Note: We’re transitioning to a new UI, and are in the process of updating our Webflow University content.
Animate a video on scroll in Webflow lets you create an interaction where a video's playback is driven by the user's scroll position. Instead of playing automatically or on click, the video advances as the user scrolls down the page — a technique used to create immersive storytelling sequences.
To achieve this in Webflow, you use a scroll-based interaction. The basic approach is to set up a trigger on page scroll that controls the current time or playback state of a video element. As the scroll position changes, Webflow updates the video frame accordingly.
This is typically done using custom JavaScript in combination with Webflow's interaction system, because Webflow's native interactions don't directly control video playback time by default. You'd use a Code Embed or page-level custom code to tie the scroll position to the video's currentTime property.
The effect works best with short, looping video clips specifically designed to be scrubbed — where every frame is visually meaningful. Long or complex videos don't work as well because loading time and frame-by-frame scrubbing can feel choppy.
Check the Webflow University lessons on interactions and custom code for the most current approach to building this type of animation.