SVG Animations

Chapter 15. Animating the Unanimatable: Motion with Attributes and Bare-Metal Implementations

One of the great powers of working with JavaScript for animation over CSS is that we aren’t limited by what CSS considers animatable. There are a lot of attributes that can create amazing effects when interpolated, and certainly several more where this hasn’t even been attempted in any real way yet.

requestAnimationFrame()

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 ...