Stagger, but never blockStagger, but never block

All at once vs. a sequence

Press Replay, then drag the stagger.

.grid > * {
  animation: enter 300ms var(--ease-out) backwards;
  animation-delay: min(calc(var(--i) * 50ms), 400ms);
}
@keyframes enter { from { opacity: 0; transform: translateY(8px); } }

Click before it lands

Press Replay, then click card 12 right away.

.card { animation: enter 300ms var(--ease-out) backwards; }

/* Bad */
.card.entering { pointer-events: none; }

Stagger arrival, not typing

Type in the filter and compare the lists.

input.addEventListener("input", () => {
  list.classList.remove("entering");
  for (const row of rows) row.hidden = !matches(row, input.value);
});

Why it matters, pros and cons