In JavaScript, changing the properties of elements over time to create motion or transitions is known as animation. To develop better web applications, games, or mobile apps, it's important to focus on control, flexibility, enhanced UI, and performance.
To achieve this more effectively, you need to master animation in JavaScript. In this article, we’ll explore requestAnimationFrame—a powerful browser API that has revolutionized how developers approach animation in JavaScript. This comprehensive guide will cover everything you need to know about using requestAnimationFrame effectively.
What is the window.requestAnimationFrame() method?
The window.requestAnimationFrame() method is a built-in browser API that tells the browser to schedule a repaint of the window and calls a user-provided callback function just before the next repaint. This method is specifically designed to create smooth, efficient animations in web browsers.
Syntax
let id = requestAnimationFrame(callback);
The callback function receives a single parameter, a timestamp indicating when the callback was invoked. This parameter is required.
The method returns a numeric ID, which can be used with cancelAnimationFrame() to cancel the callback if needed.
Why use requestAnimationFrame?
Before requestAnimationFrame, developers typically used setTimeout or setInterval for animations.
However, this approach often led to performance issues. The animation continued running even when the tab was inactive, was not synchronized with the display's refresh rate, and relied on fixed timing intervals.
Benefits of requestAnimationFrame
To better understand requestAnimationFrame, below is a code snippet that demonstrates how it is used. This example provides a clear idea of its implementation.
function animate(timestamp) {
// Animation logic here
console.log('Frame at:', timestamp);
// Request next frame
requestAnimationFrame(animate);
}
// Start the animation loop
requestAnimationFrame(animate);
In this function, while executing, requestAnimationFrame requests the browser to call the animate() function again before the next repaint. It creates a loop—but only one frame at a time.
In the animation, you can put your logic, such as moving an object or any game logic. While this function is executing, the browser schedules the next call. This process continues until you stop calling requestAnimationFrame().
Cancelling an Animation Frame
In some cases, we need to stop this execution, so you can cancel a frame using cancelAnimationFrame(), as described below.
let id = requestAnimationFrame(animate);
cancelAnimationFrame(id); // Cancels the scheduled animation frame
If possible, avoid using it for repeating non-visual logic and very high-frequency tasks unrelated to rendering.
Conclusion
requestAnimationFrame is an essential tool for creating smooth, performant animations in modern web applications. By synchronizing with the browser's refresh rate and providing built-in optimizations, it solves many of the problems inherent in timer-based animation approaches.
It is fast, efficient, and tailored to modern rendering engines. By using it, you ensure that your animations are not only smooth and fluid but also resource-conscious and responsive.