Scroll-Linked Animation

An animation plays once when an element enters or leaves the viewport.

Add a "Scroll-Triggered Animation" (also called reveal on scroll or animate on scroll) to [where].
Each item should fade and slide up into place once as it enters the view, playing at its own quick, smooth pace rather than following the scroll position.
Keep the content visible if scripts fail to load, and show items straight away for users who prefer reduced motion.

Layers move at different speeds relative to scroll to create a sense of depth.

Add a "Parallax" scroll effect (also called parallax scrolling or parallax layers) to [where].
Background layers should move more slowly than the content as the page scrolls, the farthest layer moving least, for a subtle sense of depth.
Keep it tied to the scroll position without lag, keep text on the normal-speed layer, and turn the effect off for users who prefer reduced motion.

An element or scene scales up or down as the user scrolls.

Add a "Zoom on Scroll" effect (also called scroll zoom or scale on scroll) to [where].
While the section is held in view, the element should grow smoothly from a small card until it fills the whole view, in step with the scroll, and shrink back when scrolling up.
Scale it without pushing the layout around it, and show it at its final size without the zoom for users who prefer 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.