Scroll Video Scrub
Scroll drives a real video's playhead frame-by-frame while a horizontal track of chapters pans across the pinned footage. Apple-keynote scrub, one MP4 and a tween.
About This Effect
A cinematic scroll-scrubbed video effect that maps your scroll position straight onto a real <video> element's currentTime, seeking it frame-by-frame the way Apple product pages do, but from an actual MP4 rather than a canvas image sequence.
The same pinned scroll also pans a horizontal track of chapter panels sideways across the footage, so a single gesture moves both the film and the story. Flick the wheel and the type smears with your scroll velocity before settling crisp.
What's Included
- Real <video> playhead driven by ScrollTrigger progress (not a sprite sheet or canvas frames)
- Seek throttled by the video's own seeked event so requests never pile up
- Horizontal chapter track panning across the pinned film on one scrubbed timeline
- Velocity-reactive skew and blur smear that relaxes to crisp on settle
- Slow push-in on the footage plus per-chapter reveals via containerAnimation
- Live scrub rail and frame counter that read like a real video scrubber
- Touch fallback: film autoplays muted and looped with chapters stacked and revealed
- Reduced-motion and no-JS safe: poster frame holds with chapters as a readable list
Perfect For
- Product reveal heroes that unfold cinematic footage as the visitor scrolls
- Brand and campaign landing pages wanting an Apple-grade scroll moment
- Portfolio and studio intros set over abstract or slow-motion video
- Storytelling sections where a film and its captions advance together
- Launch pages that need one clip-worthy, memorable scroll interaction
How It Works
A single ScrollTrigger pins the stage and scrubs a timeline that translates the chapter track sideways by its measured scrollWidth and pushes the video in slightly. The trigger's onUpdate maps scroll progress onto video.currentTime; seeks are gated by an awaitingSeek flag cleared on the seeked event, and the video is shipped all-intra (a keyframe on every frame) so each seek paints instantly. Scroll velocity from getVelocity() feeds a decaying skew and blur on the track, and gsap.matchMedia swaps in an autoplay-loop backdrop on touch and a static poster under reduced motion.