Scroll animations have a reputation problem. Done poorly, they're the digital equivalent of someone waving their hands in your face while you're trying to read. Done well, they guide attention, build narrative, and make complex ideas feel simple.
The question most people get wrong is starting with 'what animations can I add?' The right question is 'what is the user trying to understand here, and how can motion help them understand it faster?'
The 3-second rule
Every scroll animation should pass this test: if a user scrolled past it in 3 seconds, would it have communicated something meaningful — or just been decorative? If the answer is decorative, cut it. The web doesn't need more motion for motion's sake.
GSAP ScrollTrigger fundamentals
The tool most worth learning is GSAP's ScrollTrigger. Its scrub parameter is what separates good scroll animations from great ones. With scrub: true, animations link directly to scroll position — meaning fast scrollers see a compressed version and slow scrollers see it fully. This respects user agency in a way that time-based animations don't.
When to use clip-path reveals
Clip-path reveals — where content appears to wipe into view from an edge — work well for images and large text elements. The key is that the clipping direction should match the natural reading direction. Text reads left-to-right, so a left-to-right clip reveal feels natural. An upward reveal works for elements that are 'emerging' from below the fold.
The case for restraint
The portfolios that win Awwwards are not the most animated — they're the most considered. The animations feel inevitable, like they couldn't work any other way. That's the bar worth aiming for.