AI Website Guides · 2026-10-05 · 5 min read
Scroll Video Animation Website: 3 Ways to Build It (2026)
A scroll video animation plays footage as the visitor scrolls. There are three ways to build it, and they differ sharply in smoothness and weight. This guide compares them with code so you can pick the right one.
Written by AmJ, founder of Scrollhaus, and edited by the Scrollhaus editorial team. Sources and methodology are documented in the article.
Key takeaways
Disclosure: ScrollHaus publishes this guide. Technique descriptions come from public documentation of the libraries and browser APIs named, and the live examples are ScrollHaus websites you can scroll yourself.
What is a scroll video animation?
Scroll video animation, also called scroll-linked video or video scrubbing, ties playback to scroll position. Scroll down and the footage plays forward. Scroll up and it plays back. It is the engine behind many cinematic landing pages.
Method 1: Set video.currentTime on scroll
The simplest approach is mapping scroll progress to video.currentTime.
const v = document.querySelector('video');
addEventListener('scroll', () => {
const p = scrollY / (document.body.scrollHeight - innerHeight);
v.currentTime = p * v.duration;
}, { passive: true });Pros: tiny code, one small file. Cons: video is compressed with keyframes, so seeking, especially backward, is slow and visibly stutters unless you re-encode with a keyframe on every frame, which makes the file large.
Method 2: Image sequence on canvas (recommended)
Extract the video to frames and draw them to a canvas by scroll progress. Every frame is independent, so playback is smooth in both directions. File size is controlled with WebP, staged loading and a smaller mobile set. This is what our own websites use, and the code is in the image sequence canvas tutorial.
ffmpeg -i hero.mp4 -vf "fps=24,scale=1920:-2" -c:v libwebp -quality 82 frames/f_%04d.webpMethod 3: WebCodecs decoding
The WebCodecs API lets JavaScript decode video frames directly to a canvas. It avoids a large folder of images but needs more code, careful memory handling and a fallback for browsers or devices without full support. It suits advanced teams, not a first build.
Comparison
| Method | Smoothness | File weight | Difficulty |
|---|---|---|---|
| currentTime | Poor backward | Low (or high if all-keyframe) | Easy |
| Image sequence | Excellent | Medium, tunable | Medium |
| WebCodecs | Very good | Low | Hard |
Making any method production-ready
- Add smooth wheel scrolling with Lenis.
- Show a poster image first for fast paint.
- Test on a mid-range phone, not only a laptop.
- Provide a reduced-motion fallback.
- Follow the scroll animation performance guide.
Examples to scroll
Open Ice Cave, VORTA or CORNERSTONE to see scroll-driven footage that stays smooth backward and forward. For design ideas see websites with scroll animation and the full Apple-style scroll animation breakdown.
Explore animated website templates at Scrollhaus →
Need help with a template, account, or project? Email admin@scrollhaus.ai.