Animation · Entrance & exit · 10

Stagger List

Stagger List = a list whose items slide in one after another with a small delay, turning a block of content into a readable rhythm.

Skip to the modify prompt →

First
First
First

Respects prefers-reduced-motion: the animation is disabled and the final state is shown.

How to prompt it

Stagger a list: each item fades and rises 24px with a 0.1s nth-child delay, 0.5s each, transform and opacity only.

Cut the rise to 10px and the delay to 0.06s for a tighter, snappier cascade.

Drive the stagger from a CSS custom property per item (--i) so the delay is data-driven, observe the list once on scroll-in, and under prefers-reduced-motion render every row at rest. Keep total time under 1s.

Modify prompts change only the target — the rest of your page stays untouched.

What is a Stagger List?

A stagger gives a list a beat. Each row fades and rises a touch after the previous one, so the eye is led down the content instead of hitting a wall of text. Keep the per-item delay ~0.1s and the total under a second or the list feels slow to use.

Animation Specimen

Trigger: inview
Tech: css
Duration: 2.6s
Easing: cubic-bezier(0.16, 1, 0.3, 1)
Performance: transform, opacity

When to use

Feature lists, nav menus, result rows
Any group of items that should read top to bottom

Avoid when

Very long lists — a long cascade feels slow
When items must be scannable instantly (dashboards)

Keep total stagger under a second; beyond that the list feels like it is loading.

Get the code

.anim-el {
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
:root { --anim-accent: #6d5efc; }

.stagger { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; width: min(220px, 100%); }
.stagger .anim-el {
  animation-name: fadeUp;
  animation-duration: var(--anim-duration, 2.6s);
  animation-timing-function: var(--anim-easing, cubic-bezier(0.16, 1, 0.3, 1));
  padding: 14px 18px;
  border-radius: 10px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e6e7ec);
  font: 600 14px/1 'Plus Jakarta Sans', system-ui, sans-serif;
  color: var(--ink, #1a1c22);
}
.stagger .anim-el:nth-child(2) { animation-delay: 0.14s; }
.stagger .anim-el:nth-child(3) { animation-delay: 0.28s; }

@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(26px); }
  30%, 100% { opacity: 1; transform: translateY(0); }
}

<ul class="stagger">
  <li class="anim-el">First</li>
  <li class="anim-el">Second</li>
  <li class="anim-el">Third</li>
</ul>

Copy and drop it into your project. The motion touches only transform / opacity; colour comes from --anim-accent.

Stagger List

What is a Stagger List?

Animation Specimen

When to use

Avoid when

See also

Components

Animations

Styles

Themes

Prompts

Glossary

Anti-patterns