Command Palette

Search for a command to run...

Hectal
Phase 15: Motion for React
Web Animation · Exercise 2 of 4 PreviousNext
Intermediate

Stagger the list

Pressing Show makes the three rows appear together. Use variants so the rows fade in one after another, 0.1 s apart, starting with the first.

What Check tests

  1. Soon after Show the first row has begun and the last has not
  2. The rows start in order, about 100 ms apart
  3. All rows end visible

Stuck? One hint at a time

The solution unlocks after your first Check. Try first: that is where the learning happens.

Runs in your browser. Your code is saved here.

Your page

Press Run to see the page.
00:00.000
animations
0.00s0.10s0.20s0.30s0.40s0.50s0.60s0.70s0.80s0.90s

Nothing is moving yet. Hover, click or scroll the page: every animation it starts shows up here as a track.

frames

Console

Nothing logged yet.