JavaScript is the last of the ways we’ll cover on animating SVG. We looked at CSS, which is great and pretty comfortable, but it can’t do a number of SVG properties that you might want to animate. Then we looked at SMIL, which is a declarative syntax right in the SVG code itself, which is more powerful in that it can animate more things including the shape of the elements themselves.
JavaScript can do everything either of those can do, and do it well. It just comes at the cost of either writing really complicated code yourself, or the overhead of a library to help you. But once you’re up and running, the syntax can be really wonderful and friendly to animations and the performance can actually be top-notch.
Another advantage to going with JavaScript for SVG animations is support. There are plenty of quirks to be concerned about while animating SVG. Some browsers don’t support transforms on elements. Some browsers do weird things with page zooming. Some are inconsistent with transform-origin. JavaScript libraries often help with these problems.
While we’re talking about animation specifically, many JavaScript SVG libraries are about working with SVG in general. They can create and manipulate it, access properties from the element, change them, etc. Kinda like adding a more robust API to SVG.
Snag.svg – “jQuery for SVG”
Basic example of using Snap.svg:
Another thing we did in this video with Snap.svg is convert this CSS animation Pen over to Snap.svg, teaching us we can use Snap.svg to work with inline SVG already on the page. Adobe has collected a number of examples themselves.
Raphael – older library from the same creator as Snap.svg
SVG.js – “A lightweight library for manipulating and animating SVG.” Here’s the clock demo we looked at (offline), showing how these animations work by rapidly manipulating the DOM.
D3.js – “D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS.” Here’s a tutorial on getting started creating SVG with it and another introducting animating with it.
GreenSock – “Ultra high-performance, professional-grade animation for the modern web.” GreenSock is about animations on the web in general but does support SVG. Here’s a Pen where you can see how it works.
Velocity.js – “Accelerated JavaScript animation.” Also a library about animation on the web in general, that happens to support SVG. Julian Shapiro created it and has written about why JavaScript animation can actually be the most performant style of animation as well as how Velocity.js works. Here’s a very simple demo animating some SVG-specific properties.
You’re also free to go for it on your own with JavaScript animations without the help of a framework. Remember inline SVG is in the DOM, so all the regular DOM API stuff is available to you. Kinda like you how don’t really need jQuery to work with the DOM, it just often makes it easier. Here’s an example that does things their own way that’s pretty interesting.
