Stagger one moment

Stagger one moment per view; negative delays start loops mid-flight.

From design-motion-principles, anti-checklist and cookbook.

Search results never stagger

Type in the box and compare when each list is readable.

Rows stagger inBad
    animation-delay: calc(var(--i) * 50ms)
    Rows appear at onceGood
      animation: none

      One moment per view

      Open the view. Only the checklist deserves the stagger.

      Every list staggersBad
      last row 790 ms
      Only the checklistGood
      last row 450 ms

      Loops: negative delays

      Press Reload and watch the first half-second.

      Positive delaysBad
      animation-delay: calc(var(--index) * 0.2s)
      Negative delaysGood
      animation-delay: calc(var(--index) * -0.2s)

      Why it matters, pros and cons

      Why it matters

      A stagger says “watch these arrive”. On a list people scan, it's just a wait.

      Pros

      • One stagger reads as intentional
      • Utility lists arrive with the data
      • Negative delays look alive on frame one

      Cons

      • Total time grows with list length; cap it
      • Skip on views driven by typing or paging
      • Negative delays skip the build-up sequence