Most scroll animations feel like afterthoughts. Here is how to make them feel intentional, responsive, and genuinely delightful using GSAP ScrollTrigger and modern techniques.
Where scroll animation goes wrong
The usual mistake is treating scroll as a trigger rather than a control. An element crosses a threshold, a fade plays, and the animation finishes whether or not the reader kept scrolling. It looks fine in a demo and disconnected in real use.
Tying progress directly to scroll position fixes this. The reader is driving, so slowing down slows the motion. That feedback is what makes an interface feel responsive instead of merely decorated.
// Note
Scrub-linked animations need to be reversible. If an effect can only play forwards, scrolling back up exposes it immediately.
Keeping it comfortable
Restraint matters more than range. Small offsets, short durations, and a single easing curve across the page read as considered. Large parallax distances and long delays read as a site fighting its reader.
Respect reduced-motion preferences too. Honouring that setting costs a few lines and makes the page usable for people who get motion sick from heavy effects.