Motion study

Staggered Checklist Resolve

Loading…
Scene2.5s typical

Overview

Reveal the column first, then resolve down it: spinner on item 0, checks cascading 80–120ms apart, labels brightening as they complete.

Build

  1. 01

    Column of N rows: icon + label.

  2. 02

    Appear: fade/slide up, stagger 80ms.

  3. 03

    Item 0: spinner ~400ms, then check.

  4. 04

    Items 1..n: snap to check in cascade.

  5. 05

    Labels brighten on resolve.

.row { animation: 240ms row-in both; animation-delay: calc(var(--i) * 80ms) }
.check { animation: 180ms check-pop both; animation-delay: var(--resolve) }
Example source React / TSX

examples/staggered-checklist-resolve.tsx · Uses the catalog’s shared composition helpers.

Loading source…