Scroll-scrubbed animation
An animation whose progress is directly tied to scroll position — controlled frame-by-frame.
What you're seeing
Elements animate precisely as you scroll — not triggered once, but controlled by scroll position.
Where you'll see it
Product demos, storytelling sections, feature explanations.
Difficulty
Medium — 3/5
Libraries that build it
GSAP ScrollTriggerMotion Scroll
From the toolbox
GSAPThe animation engine behind half this gallery. ScrollTrigger alone explains most scroll-scrubbed sites you've ever saved.→LenisThe open-source smooth scroll everyone actually uses. If a site feels buttery, check the bundle for this first.→
Ready to prompt — paste this into your AI coding tool
"Use GSAP ScrollTrigger with scrub: 1 to animate [element] as the user scrolls through the [section], pin the section during playback"Seen in the wild
Eduard BodakA Cologne freelancer's Y2K-zine of a portfolio — services dealt out as trading cards that unfold on scroll, and a standard-vs-feel demo that sells motion by letting you feel it.→Chartogne-TailletA champagne terroir told as an engraved, hand-drawn map you travel across — parcel by parcel.→La Fresque RuinartThree centuries of a champagne house painted as one enormous fresco — scroll opens the frame, then you drag through the artwork.→Stripe PressA bookshelf you scroll like a real one — each title a physically modeled 3D book that rotates from spine to cover as it passes.→OFF+BRANDThe Webflow Enterprise partner's own site — a WebGL line drawing of their "+." mark, scrubbed by scroll and pinned dead-center while the whole agency story assembles around it.→