What's the best way to animate an illustration for the web?
I have a couple of illustrations done in Illustrator and I am planing to animate it for a website that I am working on, I've heard of Create.js toolkit with flash, but is it the best way to go or is there another "better" way of doing it?
Here's an example of the kind of animations I am aiming for: http://kontramax.com/wp-content/uploads/envato/demo/coming_soon_machine/dark/
There are a lot of ways to animate things on the web. There are even more ways to create animations then export to web animations.
There are huge benefits to designing animations in something like AfterEffects or Animate CC (which can both import Illustrator and Photoshop files) for the obvious reasons of division of labor and use of a graphical editor.
With that being said, you should always, in the end, compile to one of the following:
Limited interaction capabilities:
More fully interactive:
- DOM based animation
Now, I'll go into each in a little more detail.
A GIF is a good way to go when the animations don't require much interaction, doesn't need to be sized dynamically, and are relatively small. Well made GIFs can be as detailed as the illustration you linked without any performance worries. Even minor interaction using a transparent overlay placed over it (or just a part of it) is possible.
Side note: there is now a
.gifv format created by Imgur which converts GIF files on the fly into the WebM or MP4 video formats. This increases performance by reducing the end file size greatly. You might consider doing the same.
Another way to keep a smooth but highly styled animation is to use a sprite. Google uses this approach for things like logo animation. Another great example is Alexander Engzell's old website which had a sick typography animation using this approach. This is optimal when a GIF would be too large but you don't need much interaction.
We've gained great capabilities regarding video in recent years. The
<video> element let's us customize the way we interact and use videos like never before. Now we can make use of full-screen background videos easily and do things like go frame by frame on scroll. I also noticed that FaceBook uses video for some simple animations when welcoming users on their feed around special events. The benefits are that it can be compressed to a pretty small file size and can do a more wide range of animations (anything that video editing software can do). As such, if someone can make a sick video then it's fairly easy to turn that into a fantastic addition to a webpage.
Obviously, video's aren't good for the majority of animations on the web (e.g. button transitions, etc.), so don't use them everywhere.
With all this being said, if you want the animation to be dynamically generated, when you need more than really basic interaction, when you want to create 3D environments, and in many other cases, a GIF, sprite, or video simply won't cut it. Once this is decided, there are several other options, the best of which is dependent on your animation and needs.
However, the primary drawback to using Canvas is its relative difficulty to scale. Often times, depending on the animation of course, it is more difficult to make a responsive Canvas animation than it is using other means. Another downside is that having much content on a Canvas is not very SEO friendly because canvas elements aren't crawlable (you can work around this by putting some visually hidden HTML of the content if applicable). On the same note, things like text selection for users is difficult with Canvas (especially without using a library like CreateJS).
A prime use of Canvas is Google's doodles, which are often done in Canvas. When they have a game or interactive animation, they use Canvas every time that I've looked. If there is no interaction, they'll use a GIF or sprite.
There are a lot of great libraries to help working with Canvas easier, though it's definitely not required depending on what needs to be done. Among the ones made just for Canvas are CreateJS (which you can export to from Animate CC), Pixi.js, PaperJS, KineticJS, and FabricJS (placed in order of my impression of them). An After Effects plugin named Lottie (formerly BodyMovin) can also export to Canvas (or SVG) and has a build in animation engine.
Of course, you can also pair larger animations libraries like GSAP with Canvas easily. For something as detailed as the illustration you linked I'd recommend using some type of framework, but for a lot of things they aren't really necessary, just useful - especially if you know how to use one of them already.
Another incredibly powerful way to animate things on the web in an easily responsive way is to use an SVG (Scalable Vector Graphics). They fulfill their purpose - being scalable vectors - well. Many find using SVGs confusing at first, but most things like SVG's coordinate system and transforms have great articles explaining them.
Since SVG elements can be in any shape, they can be used to create some cool effects. Sarah Drasner made some helpful performance benchmarks regarding SVG animations that show which ways of animating SVG is best performance wise.
Depending on the animation (and need of browser support), a library like Snap.svg or GSAP may be useful, but often times CSS and, if needed, a little custom JS is all that is required. With that being said, an After Effects plugin called Lottie (formerly BodyMovin) and a Flash extension called Flash 2 SVG can be really helpful for creating SVG animations.
For more detail, take a look at this related post specifically on animating SVG elements.
P.S. It's best to use SVGs in an
<object> tag or embedded directly in an
<svg> XML element if it's interactive and as a background image if its not interactive, but there are other ways to do it as well.
In my experience, CSS animations and transitions should primarily be used for UI elements and other basic transitions and animations. Even then, sometimes using a JS animation library like GSAP or Velocity.js for UI animations/transitions is appropriate. It really depends on the type of behavior you want and whether or not it's convenient to do in CSS.
With that being said, simple interactions using transitions and animations should usually use CSS; you should default to it. To start learning how to animate using CSS, check out my introduction to web animation.
You can also find helpful animations and easing functions in libraries like Animate.css that you can pull from and add to your own projects. You'll almost never need the whole library, take only the parts you want.
animate(), but they can be particularly high performing, especially when using the web animations API (discussed below), or a specialized animation library like GSAP, Velocity.js, or mo.js (GSAP even has a special plugin to replace jQuery's
.animate specifically). Using such a library, they can often outperform other types of animations for more intensive animations, such as animating a whole lot of elements.
The main reason why you'd need to use a DOM based animation is if you have a lot of user animation or complex timelines involving already-made DOM elements. Often times it's best to try and use something like Canvas over the DOM for reasons already specified.
Libraries like GSAP let us do crazy things like slow an animation on hover by keeping track of the animation matrices. In this way, DOM based animations can be more customized and interactive than any other form of animating when done well. The only down side is that sometimes, depending on how it's built and what it needs to do, it won't perform well.
It actually animates DOM elements to create 3D (and 2D) environments which is awesome because of the potential it has. When using a library, WebGL falls back to using Canvas but still doesn't have great support on mobile and can be performance heavy. Generally it's pretty clear when you need to use WebGL or not.
From my experience, using a WebGL library is practically necessary. Thankfully there are some good ones. ThreeJS is by far the most common I've seen followed by PixiJS. A WebGL framework like A-Frame can also make picking it up and creating basic things pretty easy.
A note on the Web Animations API (WAAPI)
The web animations API is an attempt to standardize how animations are implemented and maintained across browsers paired with performance improvements. It is meant to be used with DOM elements including SVG. It resembles how a CSS animations is structured (in a JS looking form) but adds capabilities such as a timeline and improved performance.
It improves performance by putting animations on the compositor thread (for more details check out this great post on the subject). For an introduction to how to use it, check out the Mozilla docs or this introductory post.
Some notes on performance
Avoid animating a bunch of elements on the page as they are more intensive and can also be a pain to change later on.
When using CSS, use a
transitionover an animation whenever possible (within reason). They perform better and are generally easier to work with.
Intelligently use the
will-changeproperty on large elements that you're going to animate so the browser knows ahead of time. For more details and suggestions about it read something like this SitePoint article on the subject.
setIntervaland opt for
A note on Flash
With that being said, Animate CC (a rebranding of Flash) is a useful way to create animations and can export to Canvas using Create.js.
There are usually multiple methods you can use to create an animation. The best one depends on what you want it to do, and sometimes there isn't a clear better method. Often times I find myself using multiple on the same project. The important thing is to think critically, to understand exactly how you want the animation to behave, and to decide on the method based on that. It also helps if you've worked in each a bit.
 - Lottie can also export to native Android, iOS, and React Native.