![]() ![]() In order for an animation to appear smooth, we want all the updates needed for each frame of an animation to happen within about 16 milliseconds. For example, you might have heard amazing (and untrue) claims like, “CSS animations run on the GPU”, and nodded along thinking, “Hmm, not sure what that means but it sounds fast.” So, to understand what makes Element.animate() fast and how to make the most of it, let’s look into what makes animations slow to begin with. When it comes to animation performance, there is a lot of conflicting information being passed around. Then, you can check out the full collection of demos we’ve been building! To see for yourself, try loading the demo in the latest release of Firefox or Chrome. ![]() In some cases, Element.animate() lets you create jank-free animations that are simply impossible to achieve with JavaScript alone.ĭon’t believe me? Have a look at the following demo, which compares best-in-class JavaScript animation on the left, with Element.animate() on the right, whilst periodically running some time-consuming JavaScript to simulate the performance when the browser is busy. What a performanceĮlement.animate() is the first part of the Web Animations API that we’re shipping and, while there are plenty of nice features in the API as a whole, such as better synchronization of animations, combining and morphing animations, extending CSS animations, etc., the biggest benefit of Element.animate() is performance. In this post I want to explain what makes Element.animate() special. Let’s pause for a second - “big deal”, you might say, or “what’s all the fuss about?” After all, there are already plenty of animation libraries to choose from. In Firefox 48 we’re shipping the Element.animate() API - a new way to programmatically animate DOM elements using JavaScript.
0 Comments
Leave a Reply. |