Stagger

A heading is split into characters, words or lines that animate in one after another with a small delay.

Add a "Split Text Stagger" entrance (also called letter stagger or staggered text reveal) to [where].
Split the heading into letters that rise and fade in one after another with a short delay between them, quick and smooth without bounce.
Play it once when the heading comes into view, keep it read as one word by screen readers, and show it without motion for users who prefer reduced motion.

Items fade and slide in when added and animate out when removed while neighbours close the gap.

Add a "List Item Enter/Exit" animation (also called an animated list) to [where].
A new item should first open up its space and then fade and slide in; a removed item should fade out first and then collapse so its neighbours close the gap smoothly.
Keep a removed item in place until its exit has finished, so the list never jumps when items are added or removed.

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).

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.

The element spins and scales up from a point while fading in.

Add a "Swirl In" entrance animation (also called swirl in forward) to [where].
The element should spin well past a full turn while growing from a single point to full size and fading in: fast at first, slowing as it settles.
Play it once on a single element rather than a whole group, and show it in place without motion when the user prefers reduced motion (prefers-reduced-motion).

Letters start widely spaced and faded, then tighten into normal spacing while appearing.

Add a "Tracking In" text animation (also called text tracking in or letter-spacing in) to [where].
The letters should start widely spaced and faint, then draw together to normal spacing while becoming fully visible: smooth, slowing down at the end.
Keep the text centered and on one line while the spacing changes so the surrounding layout doesn't shift, and show it at normal spacing when the user prefers reduced motion (prefers-reduced-motion).

The element grows from a small, transparent state to full size while fading in.

Add a "Zoom In" entrance animation (also called scale in) to [where].
The element should grow from small and transparent to full size while fading in: quick and smooth, with no overshoot.
Scale it from its center without affecting the surrounding layout, and show it in place without motion when the user prefers reduced motion (prefers-reduced-motion).