How to Build a Website Where the Video Plays as You Scroll

You've seen it on Apple's product pages. You scroll, and a phone rotates, a laptop opens, or a pair of earbuds floats apart, perfectly synced to your scroll wheel. Scroll back up and it plays in reverse.

It's one of the most requested effects in web design, and if you search "play video on scroll," you'll find a pile of long GSAP tutorials. Here's the plain-English version of how it works and how to skip most of the grind.

Here's the part most tutorials bury: the effect usually isn't a video at all.

Scrubbing an actual video file by scroll position tends to stutter, because browsers aren't built to seek through video frames that fast. So the polished versions convert the video into a sequence of still images, often a hundred or more frames. Those images get drawn onto a canvas element, and as you scroll, the page swaps in the frame that matches your scroll position.

A library like GSAP ScrollTrigger handles the scroll math, tying scroll progress to frame number. Smooth scrolling (often with a library called Lenis) makes the motion feel buttery. That combo is behind most of the apple style scroll animation you see.

This effect looks magical when it works and painful when it doesn't. Watch for:

• Too many heavy frames. Compress your images and use a modern format like WebP. Hundreds of large PNGs will crawl.
• Loading everything at once. Preload the first frames so the opening looks instant, then load the rest in the background.
• Mobile. Phones have less memory. Use smaller frames or fewer of them on small screens. Mobile-first design →
• Reduced motion. Some visitors turn off animation for comfort. Give them a static image instead. Accessibility basics →

A good scroll animation website usually does more than the hero video. Text fades in as you reach it. Sections pin in place while content moves through them. Panels slide horizontally. A gallery shifts into depth. Together, this is what people call scrollytelling: a page that unfolds as a story instead of a stack of sections. Hero section guide →

It's perfect for product launches, luxury brands, portfolios, agency sites, and anything where you want visitors to remember the experience.

Here's the catch. Prompt an AI tool to "make the video play on scroll" and you'll usually get a basic version that scrubs a video file directly. It stutters, skips frames, and falls apart on mobile.

The Cinematic Scroll skill gives your AI tool the full recipe: canvas image-sequence scrubbing across the whole page, GSAP ScrollTrigger setup, Lenis smooth scroll, animated typography, pinned panels, a depth gallery, and the performance rules that keep it smooth. You bring your own hero video and images, and the skill handles the build.

That's a project that usually takes days of tutorial-following, turned into something your AI tool can produce in one pass. If you've been wanting an Awwwards-style landing page, this is the shortcut.