JavaScript Animations — Element.animate vs requestAnimationFrame vs Conventional Animation

Animations have become an inseparable part of the web. Though it has a positive effect on the UX, it undeniably affects the performance when not implemented properly. In this article, we will compare and contrast the three ways of animations using JavaScript.

Conventional Animations

requestAnimationFrame

Element.animate()

Please check the below Codepen, wherein I have implemented the same animation using all three methods.

Conventional Animations:

In the conventional method of animation, we use setInterval and setTimeout to animate objects on the screen. This has serious side effects on the performance. As these Timer APIs undergo an Event loop, the timing may not be accurate and may lag in the performance and animation. Hence it is the most unreliable and inefficient way of animations.