Scroll-linked animation (scrubbing)
Animation progress wired straight to scroll position, so scrolling down plays it and scrolling back up rewinds it.
See it
What it is
Scroll position becomes the playhead. At 40% through the section, the animation sits at 40%, and scrolling back up runs it in reverse. That reversibility is what separates it from a scroll-triggered reveal, which fires once when an element enters view and then forgets you.
Reach for it when the user should feel in control of a sequence: an image sequence rotating a product (the Apple product-page move), a diagram assembling itself, text swapping inside a pinned section, a horizontal gallery driven by vertical scroll. Tooling: GSAP ScrollTrigger with 'scrub: true', Framer Motion's useScroll plus useTransform, or native CSS 'animation-timeline: scroll()' and 'view()' with no JS at all.
Gotcha: a hard 1:1 scrub feels twitchy, because trackpads and mouse wheels deliver scroll in jerky chunks. Add smoothing (GSAP's 'scrub: 1' lags the playhead by a second of catch-up). And write the animation so any scroll position resolves the full state on its own; anything that depends on 'what happened before' breaks the moment someone reloads mid-page or hits a hash link.
Ask AI for it
Build a scroll-linked (scrubbed) animation for this section: pin the section and tie the animation's progress directly to scroll position so scrolling down advances it and scrolling up reverses it. Use GSAP ScrollTrigger with 'scrub: 1' for smoothing (or CSS 'animation-timeline: view()' if no library is available). The sequence should run from 0 to 1 over roughly 150vh of scroll, be fully reversible, and resolve correctly if the page loads mid-section. Respect prefers-reduced-motion by snapping to end states instead of animating.