Web Animation · Exercise 4 of 4 Previous
Advanced
Fix the four bugs
This panel has four motion bugs: the meter moves with a layout property, Tidy reads and writes in turn, Clear hides the sparkles but leaves them animating, and the badge pulses for ever with no reduced-motion rule and no pause control.
Fix all four. The meter must still fill over 600 ms, every row must still grow, the badge must stay visible, and the page needs a button with the attribute data-pause-motion.
What Check tests
- Charging the meter animates only cheap properties
- Tidy never reads a height after it has written one
- After Clear, no sparkle is still animating
- A pause control sets the pulse to paused
- Reduced motion: the badge stands still but is still there
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.
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.