Web Animation · Exercise 4 of 4 Previous
Advanced
Fly the dot to the cart
Pressing Add only changes the number. Make a small dot (div.fly-dot) fly from the button to the cart with animate() over 500 ms, then remove it. When it lands, show the new number.
Pressing Add twice quickly must work (two dots, count 2, no dot left). With reduced motion, no dot is created: the number just changes.
What Check tests
- Pressing Add creates a dot with an animation on it
- Half way (250 ms) the dot is between the button and the cart
- After the flight the dot is gone and the count says 1
- Two quick presses: no dot is left and the count says 3
- Reduced motion: no dot, and the count still changes
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.
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.