Scroll-Triggered Animation

Animation progress is tied directly to scroll position, so scrolling forward or back plays or rewinds it.

Add a "Scroll-Linked Animation" (also called a scroll-driven animation or scroll scrub) to [where].
The animation should move exactly with the scroll position, so scrolling down plays it forward and scrolling up rewinds it on the spot, with no time-based easing of its own.
Map the whole animation to a clear scroll range, and show a sensible static state for users who prefer reduced motion.

The element rises a short distance while fading in, as if settling into place.

Add a "Fade Up" entrance animation (also called fade-in-up or reveal on scroll) to [where].
Elements should rise slightly while fading in the first time they scroll into view: subtle and quick, not bouncy.
Animate once, and skip the motion when the user prefers reduced motion (prefers-reduced-motion).

Items in a group animate one after another with a small delay, forming a wave instead of appearing all at once.

Add a "Stagger" animation (also called staggered animation or cascade) to [where].
Items should fade up one after another with a short, even delay, so the group appears as a quick wave instead of all at once.
Keep the whole sequence brief even for long lists, animate once when it scrolls into view, and skip the motion when the user prefers reduced motion (prefers-reduced-motion).

Words of a paragraph go from dim to full opacity as the user scrolls.

Add a "Text Reveal" effect (also called scroll text reveal or word-by-word reveal) to [where].
The paragraph should start dim, and as the user scrolls each word should brighten to full strength one after another, tied to the scroll position.
Scrolling back up should dim the words again, and the whole paragraph should stay available to screen readers whatever its dimming.

Scrolling and anchor jumps glide with easing instead of moving abruptly.

Add "Smooth Scroll" (also called smooth scrolling or inertia scroll) to [where].
Scrolling and jumps to anchors should glide and ease to a stop instead of moving in abrupt steps, with a light, responsive feel rather than a heavy lag.
Keep native behaviour such as keyboard scrolling, the scrollbar and find-in-page working, and turn the smoothing off for users who prefer reduced motion.

Cards stick at the top as the user scrolls and pile on top of each other, often shrinking the earlier ones.

Add "Stacking Cards" (also called sticky stacking cards or a card stack scroll) to [where].
As the reader scrolls, each card should stick near the top and the next card should slide up over it, while the cards underneath shrink slightly so a neat pile builds up.
Leave a thin edge of each earlier card showing, and give the last card enough room to reach its place before the section ends.

A sticky header reduces in height or size after the user scrolls down.

Add a "Sticky Header Shrink" (also called a shrinking header or shrink on scroll) to [where].
The header should stay at the top and, once the reader scrolls down a little, smoothly shrink into a slimmer bar with a smaller logo, growing back when they return to the top.
Keep the content below from jumping while the header changes size.