Stagger
The same animation on a row of siblings, each starting a beat after the last, so the group cascades instead of moving as one block.
See it
What it is
Stagger is one animation applied to a set of siblings with a small incremental delay added per item: item one at 0ms, item two at 60ms, item three at 120ms. The group arrives as a cascade instead of a slab. Every motion library has it built in (GSAP 'stagger', Framer Motion 'staggerChildren', Anime.js 'delay: stagger()'), and in plain CSS you set 'animation-delay' from an index custom property.
Use it when a list, grid, nav, or split-text headline enters. The delay does the work of directing the eye: it tells the reader where to start and which way to read. You can stagger from the first item, from the last, from the center outward, or by grid distance from a point, which is how those diagonal card-grid reveals are made.
Gotcha: total time is the last item's delay plus its duration, so a 60ms stagger across 30 rows takes almost two seconds and the bottom of the list feels broken. Keep per-item delay in the 30ms to 80ms range, cap the total (divide the budget by item count, or only stagger the first 8 and let the rest come in together), and never stagger something the user is waiting to click.
Ask AI for it
Animate these list items in with a stagger: each item fades from opacity 0 and translateY 12px to its resting state over 350ms with an ease-out curve, and each subsequent item starts 60ms after the previous one. Cap the total stagger so the last item starts no later than 500ms in. Drive it from an index custom property on each item, animate transform and opacity only, and skip the offsets entirely under prefers-reduced-motion.