Using requestAnimationFrame makes smoother animations ✣ S.Bistrović

JavaScript Jack Crevalle says:

Use requestAnimationFrame to sync updates with the browser’s refresh rate.

And here’s why:

It makes animations look smoother.
It helps animations run at the right time, not too fast or slow.
It’s better than using setTimeout or setInterval, which can cause jank or inaccurate movement.
It saves power because it stops running when the page isn’t visible.
It helps the browser work more efficiently.

Here are some tips for using localStorage.

Only use requestAnimationFrame for animations or movement, but don’t use it for loading data or running background tasks.
Make sure you don’t start the same animation loop more than once.
Stop the animation when it’s done or when it’s unnecessary so it doesn’t keep running.
If someone has turned on “reduce motion” in their settings, skip or simplify the animation.
Don’t mix reading and changing styles in the same frame — that can make the animation slower.

And here’s a demo where a circle smoothly follows the mouse pointer: