The State of Web Animation: Part 2

In Part 2, we're picking up where I left off with current tools for animation with JavaScript (mostly in the form of JavaScript libraries). Be sure to check out Part One.

Javascript is admittedly a more controversial method of animation than the methods I mentioned previously (Video, Gifs, CSS Transitions + Keyframes). There was once a day when we longed for CSS support of animation and, when that day came to pass, many disregarded JavaScript animation as non-performant and outdated. But now, JavaScript animation is making a come-back in a few different forms (and no, none of them are just changing CSS classes). There are far too many libraries out there to cover them all, so I'll try to cover more broad techniques with some notable libraries:

jQuery

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.

This quick menu example just feels so slow to me! And if you look under the hood, you'll see that JavaScript is editing a style attribute on that nav about a billion times a second. Yeah... not very efficient.

Animating Canvas: EaselJS, Fabric.js, Paper.js...

There a ton of JavaScript libraries these days that focus on animating within the HTML5 <canvas> element, which has been around since about 2004. Either rastor graphics or 2D vector shapes can be animated within a canvas element. Contrary to instincts, Canvas animation is pretty performant, as long as you follow some general guidelines. The secret sauce for Canvas is that it can tap into your hardware more than your browser normally does, which makes your animations buttery-smooth.

Since Canvas is JavaScript-based, there’s a lot of flexibility with what you can do within a canvas element as you draw and move elements to what is essentially a stage (if you remember those from Flash). Re-creating some of the Flash sites of old within canvas is very plausible and Canvas was initially considered a replacement for Flash.

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.

Credit for this interactive animation goes to lannymcnie on CodePen. Built with CreateJS.

Animating SVG: Snap.svg, vivus.js, BonsaiJS...

Also emerging are JavaScript libraries created to animate SVG specifically. You can absolutely use these for all of the same purposes as the canvas equivalents above. Only SVG libraries are way better than the canvas alternatives in my personal opinion for the one reason I don't like canvas: SVG can be accessible. Any <text> inside of an SVG can be read by a screen-reader and you can use a lot of ARIA attributes that you would also use on HTML.

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.

Bodymovin

Out of the SVG animation libraries, I did want to single out Bodymovin specifically. Bodymovin is an awesome cross-team tool which bridges the gap between SVG animation in design and development as it's both an After Effects plugin and a JavaScript library. You can export JSON data about your keyframes from After Effects and then use JavaScript to play those animations, loop animations, or jump between different keyframes and sets of frames.

Best use case: Bodymovin is amazing for more narrative animations, character animations, or animations that need to progress after user input. You get all the illustrative control of SVG with the programmatic control of JavaScript.

Our very own Minh Tran and Greg Kohn collaborated to bring Avo to life for a project with AARP. Be sure to check out the full AARP - Ace Your Retirement Case Study.

GreenSock

GreenSock (or GSAP) is a library that is able to animate pretty much anything: HTML, SVG, Canvas. All while maintaining performance and being really easy to pick up for developers (it can play well with jQuery, for one). I fully admit I've never used it, but it's made its way around the conference scene in the last few years. At first glance you might be skeptical of their performance claims, but either through JavaScript trickery or an intelligent utilization of CSS within their JavaScript (or both), GreenSock manages to keep closer to the golden 60-frames-per-second ideal than you might expect. To prove their point on the performance issue, Greensock even created a test that allows you to compare Greensock's performance to other competitors.

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.

CodePen by davidpuchyr — built with HTML5 and GreenSock.

Performance

I could not in good conscience write a post talking about JavaScript libraries without, of course, mentioning page weight. Before you add any of these libraries to your website, make sure the ends justify the means. Adding Greensock to your site just to do a single bounce animation when your homepage loads is probably over-kill. Don't use what you don't need and don't add that extra 100kb of JavaScript if you don't have to.

Onward...

These libraries are awesome for their own purposes, but most of the animation I've mentioned is, well, very two-dimensional. Next, in Part 3, I'll cover WebGL, VR, and some newer JavaScript animation features.