Designing scroll like a film editor
A practical guide to GSAP ScrollTrigger choreography — pacing, beats, and the difference between motion and noise.
Scroll is a timeline. Most sites treat it like a list — block, block, block. The web's best motion designers treat it like a film: scenes, cuts, beats, breath. The trick is to stop animating individual elements and start composing sequences.
Begin by sketching a story spine for the page. What's the inciting moment? Where does tension build? Where does it release? Map those beats to scroll percentages, not pixel counts. ScrollTrigger gives you start/end anchors — use them to mark scenes, not to move boxes.
Pacing matters more than easing. A great curve can't save a sequence that fires three reveals at the same time. Stagger by intent: hero reveal at 100ms, supporting copy at 280ms, secondary CTAs much later. Silence is part of motion design.
Finally, audit ruthlessly. Record a 60-second screen capture of your scroll, mute it, and ask: would this hold a stranger's attention? If everything moves, nothing moves.