Command Palette

Search for a command to run...

Hectal
Phase 1: How Motion Works
Web Animation · Exercise 2 of 4 PreviousNext
Beginner

Make it keep time

The dot should move 240 px to the right in 800 ms and stop exactly there, on every screen. The starter counts frames (3 px per frame), so it is wrong.

Rewrite the loop to use the time given to the requestAnimationFrame callback.

What Check tests

  1. 400 ms after the click the dot is half way (120 px)
  2. After 900 ms it is exactly at 240 px
  3. It stays at 240 px

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.