Chapter 15. Animating the Unanimatable: Motion with Attributes and Bare-Metal Implementations
Of course, you don’t need a library at all to animate an SVG. One nice and performant way of animating is to use
requestAnimationFrame() (rAF for short). rAF can be used as a replacement for other native methods, like
setInterval() (though this method has been improved by backporting features that rAF pioneered).
The way it works is you tell the browser a function that updates the animation prior to the next repaint. rAF calls do not create a nested call stack, which can be a performance problem. Instead, they add the callback to the queue managed by the browser, and only one instance of the function is ever running at a given time.
The magic of
requestAnimationFrame() is that it will run at 60 frames per second when it can, but under the hood, it will actually figure out how fast to run based on your device: it will run faster on desktop and slower on mobile. It will also stop working when running in a background tab, so battery life is preserved, and it doesn’t use resources when it doesn’t need them. This saves us work as developers—all of this used to have to be ...