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 a visual editor like Rive, AfterEffects, or Animate CC. These tools allow you to import assets, set up a lot of the logic visually, and can make some things that are a huge pain to do by hand easy. It also further enables division of labor between designers and developers.
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 can be 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.
The biggest thing to watch out for with GIFs is the file size. They are usually pretty large (multiple megabytes) if they're not very small or low quality. That's why most people these days use videos to display GIFs unless they are very small, like emoji reaction size. For example, Imgur converts a "
.gifv" format 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. Custom typography animations that are very illustrated are a great use case for this approach. This is best used when it's a short animation, a GIF would be too large in file size, and you don't need much interaction. Especially when you're working with a designer who is able to easily create images for the sequence.
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 an amazing video then it's fairly easy to turn that into a fantastic addition to a webpage.
If you're creating a highly detailed or very long animation and don't need much interaction, video very well may be the best way to go. However, video's aren't good for the majority of UI sorts 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 "real" 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 and tools 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 can also export to Canvas (or SVG) and has a build in animation engine. There's also at least one web editor for it: LottieLab. Rive is a newer tool that is like Lottie but has some additional niceties and a smaller file size. There are also a lot of game engines that use Canvas as their export format like PlayCanvas, Unity, Game Maker, GX, Godot and many others.
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 simple 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.
SVG works well until you have a lot of elements on the page at the same time or you're animating a bunch of properties that are intensive to animate. For those sorts of animations, Canvas is a better choice.
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 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 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 for those cases.
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 probably never need the whole library, take only the parts you need for your project.
animate(), but they can be particularly high performing, especially when using the web animations API (discussed below), or a specialized animation library like GSAP, Anime, or tween.js. 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. Most all top-of-the-line marketing websites make use of JS-based DOM animation and/or WebGL.
WebGL is a way to create primarily 3D works. It has some awesome projects that you should check out. It's not to be used on every web page, obviously, but it's important to mention.
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. For animating images and videos of a regular website, Curtains.js is a good option. A WebGL framework like A-Frame can also make picking it up and creating basic things pretty easy.
I wrote more about adding WebGL effects to "regular" webpages on CSS-Tricks.
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 using non-performant properties or causing reflows/repaints.
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
transition over an animation whenever possible (within reason). They perform better and are generally easier to work with.
Intelligently use the
will-change property 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.
setInterval and opt for
A note on scroll animations
There are various ways to animate things on scroll. For an overview, see my post on CSS-Tricks.
A note on Flash
You should never run Flash in the final product. Flash is officially dead. Don't use it. The only case where you might consider it is if you're doing an installation and have specialized hardware and software that you know runs 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.