How can request Animation Frame improve animation smoothness?

request Animation Frame synchronizes animation updates with the browser’s repaint cycle, improving smoothness and efficiency.

It optimizes animations by running callbacks before the next repaint, matching the display’s refresh rate, reducing CPU usage, and avoiding frame drops compared to timers like setTimeout.

Code

function animate() {
  // animation logic
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);