Finding the best way to animate SVGs
I am currently doing some research on SVG animation for one of the projects I am working on and thought I’d share my progress with you. I've been trying to make some circles, connected with lines, forming shapes and kind of animating/morphing each shape into another nicely.
Just so you know, this is a work in progress, and not a finished product; I am writing this as a starting point and to help me organise my thoughts.
I haven’t done any SVG animation before, so if you’re familiar, then please, bear with me!
SMIL or no SMIL
The first thing I found out about was SMIL (Synchronized Multimedia Integration Language), which immediately rang a bell, even though I have never used it before. The thing I found out immediately after was that SMIL is dead! For example, Chrome dropped its support as of version 45. I have to say that it wasn’t encouraging...
Even though SMIL might have been suitable for the animations that I’m trying to create, I don’t really want to learn something that might not be supported soon. Hence, after a confusing and fruitless start, I decided to ignore SMIL and focus on other techniques, especially as SMIL is not supported at all in Internet Explorer. I work on plenty of projects that support good old IE, so that alone was a big problem.
I also found lots of useful info in this series by Sarah Dresner, which mentions GreenSock among other techniques. If you’re already familiar with GreenSock (also referred to as GSAP), the series might be great for you, although it isn’t meant for beginners. If you’re interested, take a look at some awesome examples of GreenSock animations here.
(I particularly like one of these examples. The fly following my mouse around this page could have been annoying, but instead it made me smile).
Velocity.js is very similar to jQuery’s $.animate(). It is much faster than jQuery though and the filesize of Velocity.js when zipped is 7kb! Hence, if you’re already using $.animate() and care about speed it’s worth considering Velocity.js. It would be very easy to replace jQuery, as it used the same syntax as $.animate()’s. It supports IE up to IE8 and all other major browsers. If it sounds like you might benefit from using it, take a look at Velocity’s website - it’s packed with useful resources.
CSS animation is probably the most well known one in the mix. To animate an element, we would define some styles and an @keyframes definition that would deal with animating those styles. You may define some properties for the animation, such as duration, delay, timing and iteration count (and a few more), so it may be suitable for most simple animations. Since you most likely already use CSS in your project, you can use it right away; there’s no need to install or download anything! It is supported by all the modern browsers, although it goes only up to IE10.
There are a few known issues, although most of them seem pretty minor. If you haven’t used it yet, here’s a cool video from Chris Coyer that will introduce you to CSS animations. With regards to animating SVGs with CSS, you may only animate those SVG properties that are shared between the two, so it is limited.
So... which one?
With so many to choose from, I looked up some benchmarks at CSS Tricks (again - by Sarah Drasner) and found some interesting results:
CSS transforms might be a good option, if you don’t need to support IE9 or earlier and your animations are going to be quite simple. Modifying keyframes might be a lot of work for more complex animations (i.e. if you’re planning on chaining animations together), because it would be a pain if you decided to change the timing within keyframes (you would need to edit each step of the animation).
If you’re already using jQuery for animations in your project, it would be easy to replace it with Velocity.js, which is better supported than CSS (IE8 and later), although Sarah mentions it is less performant than CSS, SMIL or GreenSock.
GreenSock comes out pretty well here, with widest support (IE6! Who still uses IE6?). Its main advantage over the others is that there are a number of advanced plugins, which means that you can do some really cool animations out of the box that would otherwise be really difficult. For example, there is one purely for text animations and a MorphSVG plugin for morphing shapes into one another!
Even though I haven’t yet done any work with any of the above techniques/libraries (well, I did CSS animations), I am leaning towards GreenSock for my little project. As I am planning to morph circle and line based shapes and Green Sock provides the MorphSVG plugin, I am planning to try it out as the first option.
I am planning to report back to tell you all about it once I’ve tried it out, so make sure to check back here in a few weeks, if you’re interested!