Command Palette

Search for a command to run...

Hectal
Phase 5: Easing and Timing
Web Animation · Exercise 3 of 4 PreviousNext
Intermediate

Cap the stagger

Thirty chips fade in, each 50 ms after the last. The last one waits almost 1.5 seconds.

Change the JavaScript so no chip waits more than 300 ms, while the first seven still have different delays.

What Check tests

  1. No chip waits more than 300 ms
  2. The first seven chips have seven different delays
  3. Everything is visible 600 ms after the click

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.