requestAnimationFrame(): movement by time between frames

Useful to know

requestAnimationFrame() asks the browser to call a function before the next repainting. The frequency usually follows the display frequency; it is not a promise of exactly 60 calls per second. In many browsers, work is paused for background tabs. [1]

If you move an object with one pixel per frame, the speed depends on the number of frames. At conditional 60 frames per second, this is 60 pixels per second, and at 120, twice as many. Better calculate the distance from the elapsed time: speed × elapsed time.

For example, at a desired speed of 100 pixels per second and an interval of 0.02 seconds, the movement is 2 pixels. This is an arithmetic example, not a measurement of a specific monitor.

For continuing animation, the function must again request a next frame. Stop the cycle when there's nothing to animate anymore. Thus, the temporal logic remains clear and unnecessary work is not maintained.