Stagger, briefly

Stagger items about 50ms apart, and never block input while it plays.

Emil Kowalski@emilkowalski
When showing multiple elements at once, try applying a slight delay to each one for a smoother transition. For product UI, the delay between two elements should not be higher than ~50ms.

Shown in Demo 2: drag the stagger past the 50ms mark and search again.

Aug 19, 2025View on X ↗
Emil Kowalski@emilkowalski
It consists of a 4px blur, Y transform, and a subtle stagger.

Shown in Demo 1: every row enters with 4px blur and 8px of Y; only the stagger changes.

Nov 10, 2025View on X ↗
Emil Kowalski@emilkowalski
- "stagger this list of items"

Shown in Demo 3: the list staggers, and stays clickable while it does.

Jun 1, 2026View on X ↗

From emil-design-eng, “Stagger Animations”: 30–80ms.

All at once, 50ms, 200ms

Press Play, then add rows.

All at onceFlat
    stagger: 0ms300ms
    50ms apartGood
      stagger: 50ms550ms
      200ms apartSlow
        stagger: 200ms1300ms
        @keyframes enter {
  from { opacity: 0; transform: translateY(8px); filter: blur(4px); }
}
.item {
  animation: enter 300ms var(--ease-out) both;
  animation-delay: calc(var(--i) * 50ms);
}
@media (prefers-reduced-motion: reduce) {
  .item { animation-name: fade; }
}

        Find the ceiling

        Drag the stagger past 50ms, then search again.

        Shaded range is 30 to 80 milliseconds from the skill; 50 milliseconds is the recommended cap for product UI.

        Results8 files
          650ms
          results.forEach((el, i) => el.style.setProperty("--i", i));
list.classList.remove("run");
void list.offsetWidth;
list.classList.add("run");

          Click while it plays

          Press Reload, then click the first message in each.

          Locked until doneBad
            Ready0 opened · 0 dropped
            Clickable throughoutGood
              0 opened
              row.addEventListener("click", () => open(row.dataset.id));

              Why it matters, pros and cons

              Why it matters

              A short cascade gives a reading order. Delay compounds, so keep it near 50ms.

              Pros

              • Lists arrive instead of popping in.
              • Leads the eye top to bottom.
              • One custom property per item.

              Cons

              • Total time grows per item; cap at 6 to 8.
              • Skip it on lists seen many times a day.
              • Never gate clicks on it; it is decoration.