A time-based animation with easing
However many frames your screen draws in half a second (about 30 at 60 Hz, 60 at 120 Hz), the ball arrives at exactly 220 px in 500 ms. The page shows how many frames it took on your device.
requestAnimationFrame(callback) runs your code right before the browser draws the next frame, in step with the screen; animate by computing each frame from the elapsed time (not by counting frames), change only cheap properties like transform and opacity, and stop with cancelAnimationFrame.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write fadeIn(el, duration) that animates opacity from 0 to 1 with rAF and logs faded when done.
Write a countUp(el, to, duration) that animates a number in el.textContent from 0 to to with whole numbers, ending exactly on to.
Explain it without notes
What does requestAnimationFrame do, and why is it better than setInterval for animation?
Why should animations be based on elapsed time rather than frame count?
Which CSS properties are cheapest to animate, and why?
How can rAF be used to throttle high-frequency events?
Preview
Console
Nothing logged yet.Expected console output
rAF callbacks haven't run yet
finished at translateX(220px)