The State of Web Animation: Part 2
Megan Zlock, Former Front-End Development Director
Using jQuery as an animation tool (with .animate()) is pretty outdated. Unless you really need your animations to work in IE versions 9 or less, then using CSS transitions will probably serve you better. In my opinion, it’s better to just swap classes with jQuery and let CSS handle the transition.
Status: Supported, but less performant and generally frowned upon.
Best use case: If you are already using jQuery, .slideDown() is still useful if only because animating height on a collapsing element is still a huge pain for some reason, even in 2018.
Animating Canvas: EaselJS, Fabric.js, Paper.js...
The absolute killer for me with Canvas (and why I rarely use it) is its lack of accessibility. You lose all browser default behavior within the confines of the <canvas> and have to re-build every default behavior from scratch, including essential accessibility behaviors. If you’re using the Canvas to add design elements, then great, you’re fine. But animated graphs and canvas elements with content and no fall-backs are a raw deal for users who utilize assistive technologies.
Status: Support may vary by library, but canvas is supported in all modern browsers, but not IE versions less than 9. Does not support essential accessibility behaviors by default.
Best use case: Design elements or more sequential, narrative animation which is supplementary to content.
Animating SVG: Snap.svg, vivus.js, BonsaiJS...
Status: Support may vary by library, but inline SVG is supported in all modern browsers, but not in IE less than 9.
Best use case: More sequential, narrative animation, like the canvas counterparts, but can also be used for animated graphs and charts without the loss of accessibility to that content.
This fun start to an in-browser game from antoinelouis on CodePen utilizes Snap.svg. While it's not the most accessible example (there's very little text in that SVG mark-up), the little touches on this minuscule cosmos are quite delightful.
With the growing prevalence of this tool, I'm sure it's only a matter of time before I try it out! At which point I'll have to write another article on the subject... In the meantime, you can read this Medium post to get you started: The Beginner's Guide to the GreenSock Animation Platform.
Pricing: Unlike the other libraries cited, watch out for the legalese on GreenSock. If you charge users to use your site, then you have to purchase a commercial license. You're good to go on public content sites though.
Status: Greensock claims amazing compatibility (back to IE 6!). I'm sure some limitations apply depending on the mark-up you're animating, but the library shouldn't limit you.
Best use case: Could be used for pretty much anything: from complex UI animation to full narrative sequences.