Scroll Animation Terms

“Make it animate when I scroll” can mean at least six different things. Naming the right one gets you the right result on the first try, whether you’re prompting an AI or briefing a designer.

• Scroll-triggered: the animation plays once when an element enters the viewport, then runs on its own clock. Scrolling starts it but doesn’t control it. Usually built with IntersectionObserver.
• Scroll-linked: the animation’s progress is tied directly to the scroll position, so it scrubs forwards and backwards as you scroll. A reading progress bar is the classic example. CSS can now do this natively with animation-timeline: scroll() or view().
• Parallax: layers move at different speeds from the page, so the background drifts slower than the foreground and fakes depth.
• Sticky: an element scrolls normally until it hits an edge, then stays pinned there until its container scrolls past. Think of the A, B, C letter headers in a contacts list. It’s just position: sticky; top: 0.
• Scroll snap: scrolling settles on set points instead of stopping anywhere, like a full-screen slide deck. Set scroll-snap-type: y mandatory on the container and scroll-snap-align: start on each child.
• Horizontal scroll: content moves sideways. This is either a plain overflow-x carousel, or a pinned section that turns your vertical scroll into sideways movement.

The pair that gets mixed up the most is triggered vs. linked. If the animation should finish by itself once it starts, it’s triggered. If it should follow your scroll, including when you scroll back up, it’s linked.