DEV Community

zain ul abdin
zain ul abdin

Posted on

The Secret to Smooth Animations in JavaScript!

Want to create buttery-smooth animations in your web app? Try requestAnimationFrame—JavaScript’s built-in method for optimizing animations!

Instead of using setTimeout or setInterval, which can lead to janky animations due to inconsistent frame rates, requestAnimationFrame syncs your animations with the browser’s refresh rate for the best possible performance.

Here's how you can use it:

let position = 0;

function animate() {
  position += 1;
  document.getElementById('box').style.transform = `translateX(${position}px)`;

  if (position < 200) {
    requestAnimationFrame(animate); // Calls animate again before the next repaint
  }
}

requestAnimationFrame(animate); // Start the animation
Enter fullscreen mode Exit fullscreen mode

By using requestAnimationFrame, your animations run more efficiently, consuming less power and providing a smoother experience for your users.


To stay updated with more content related to web development and AI, feel free to follow me. Let's learn and grow together!

Top comments (0)