Is there a solution to create a video element in Webflow that plays based on mouse scroll and can be controlled using the "while page is scrolling interaction" option?
TL;DR
- Upload a video or use an image sequence for better control.
- Apply the "While Page is Scrolling" interaction in Webflow to animate frames.
- Use JavaScript for true video scrubbing by linking scroll position to video playback.
- Optimize images or test JavaScript for smooth performance across devices.
Yes, you can create a video that plays based on scroll using Webflow’s “While Page is Scrolling” interaction. This method allows you to control the video’s progress by linking it to the page scroll position.
1. Prepare the Video Element
- Upload your video to Webflow or embed a video using the
<video>element. - Set the video to loop and ensure it is muted (if necessary).
2. Convert the Video to an Image Sequence (Alternative)
- Webflow does not directly support scrubbing (frame-by-frame control) of videos.
- A better alternative is to convert the video into a sequence of images and use Webflow’s parallax effect or slider component to simulate video scrolling.
3. Apply the “While Page is Scrolling” Interaction
- Go to the Webflow Interactions panel (lightning bolt icon).
- Select While Page is Scrolling under Page Trigger interactions.
- Choose Animate a Video via Embed Code or Image Sequence by linking Scroll Position (0% to 100%) to the visibility or position of the frames.
4. Use Custom Code for Video Scrubbing
If you need true video scrubbing, Webflow’s native interactions won’t work. Instead, use JavaScript:
- Embed a custom video element inside an HTML Embed block.
- Add JavaScript in the Page Settings -> Inside the Before Body tag:
const video = document.querySelector("video");window.addEventListener("scroll", () => { let scrollRatio = window.scrollY / (document.body.scrollHeight - window.innerHeight); video.currentTime = scrollRatio * video.duration;});5. Test and Optimize for Performance
- If using an image sequence, ensure images are optimized for fast loading.
- If using JavaScript, test across browsers to ensure smooth playback.
Summary
Webflow does not support native video scrubbing, but you can achieve the effect using an image sequence or custom JavaScript. The best approach depends on performance needs and flexibility.