Web Animation · Exercise 4 of 4 Previous
Advanced
Pause when scrolled away
The mascot loops, even when it is scrolled out of the box. Pause it when it leaves the view and play it again when it returns.
Use an IntersectionObserver on the canvas. The player's own off-screen freeze is switched off here so you can see the difference.
What Check tests
- Out of view at the start, it is not playing
- Scrolled into view, it plays
- Scrolled out again, it is paused
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.