SVG Animations

Chapter 7. A Comparison of Web Animation Technologies

So far we’ve only really covered CSS for animation. From this point forward we’re going to move primarily into JavaScript—but before we do, I think it’s important to weigh all of the options you have for working in animation on the web, and the pros and cons of each, so that you know what you’re using and can pick the best tool for the job.

At the end of the chapter we’ll discuss the same tools in terms of their integration with React, primarily because they work a little differently in a React environment due to the virtual DOM.

There’s no possible way to cover every single animation library, so I will stick with those that I’ve used or that interest me a lot. Please keep in mind that these recommendations are based on my own experiences; you may have a different experience or opinion, and that’s OK.

TL;DR

You can read more in-depth pros and cons below, but I’ve worked with all of these technologies for a very long time, and here is my succinct suggestion: due to the fact that GreenSock corrects some of SVG’s cross-browser quirks, and has thought of every different use case for animation, GreenSock is going to be the animation technology I recommend for production sites most frequently.

Native Animation

Before we talk about libraries, let’s go over some native implementations. Most libraries use native animation technologies under the hood, so the more that you know about them, the better you’ll be able to understand what’s ...