OneTaskBy Tim King · Updated
Staggered Animation Builder
CSS Stagger Delays for Lists and Grids
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Staggered Animation Builder works
A staggered animation plays the same entrance on a group of elements, each starting a little after the one before, so a list or grid ripples into view. Enter your items, pick an effect and the delay between them, press Replay, and copy the HTML and CSS.
Staggering guides the eye down a list in reading order and makes a batch of cards feel lively rather than dumped on the page. It suits feature lists, pricing cards, menus and search results.
How the staggered animation is timed
Each item carries its position as a CSS custom property, style="--i: 0", --i: 1 and so on. One
rule sets animation-delay: calc(var(--i) * 80ms), so every item waits its turn without a separate
:nth-child rule for each position. Adding a tenth item needs only --i: 9 on it.
Keep the whole sequence short
The last item starts after the step multiplied by the number of items. With 20 items and a 100ms step, the final one waits two seconds, which feels sluggish. Shorten the step for long lists, or stagger only the first eight or so and show the rest together.
FAQ
Can I stagger items without setting --i by hand?
Yes, with :nth-child() rules, one per position, or a few lines of JavaScript that set the property
in a loop. Newer browsers also support sibling-index(), which gives each element its position
directly, but support is not yet wide enough to rely on alone.
How do I stagger a grid of cards?
Put the class on the grid container and the --i values on each card in source order. The cards
then appear left to right, row by row, which matches how people read the grid.
Can the stagger start when the list scrolls into view?
Add the animation only once a class such as in-view is on the list, and set that class with an
IntersectionObserver. The scroll animation tool shows the observer code you need.
Does this work for menus that open and close?
Yes. Run the animation when the menu gains its open class. Keep the step very short, around 20 to 40 milliseconds, so the menu still feels instant.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Fade-In Generator
Generate a CSS fade-in animation with delay, easing and blur.
Slide-In Generator
Generate a CSS slide in animation from any side.
Scroll Animation
Preview scroll reveal effects and copy the CSS or JS.
Feature Grid Builder
Responsive icon-title-description feature grids for landing pages.
Card Builder
Design a card component and copy its HTML and CSS.