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 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:
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.
I've also seen a very interesting JavaScript animation that resembles a sprite or GIF used by Google (hover the Chrome image in the top left - it requires being in Chrome) but uses an animated mask instead. I'm guessing they used this approach to limit the total file size.
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.
Many web animations use Canvas. Canvas is great to use because of its performance and flexibility in creation. It only uses one browser (DOM) element due to the fact that it just paints - like on a real canvas - things on top of each other. By keeping track of what's painted and where with JavaScript, we can create some pretty awesome animations and even games.
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.
One of the many lovely things about SVG is that it can be animated with JavaScript, pure CSS (including :hover states, transforms, transitions, and animations), or SMIL animations (the "native" way to animate things with SVG - but it's being gradually depreciated). I recommend trying to use CSS first and then JavaScript whenever it's not (relatively) simple in CSS. For morphing SVG elements, it's practically necessary to use a tool like GSAP's MorphSVG plugin unless you're okay with only partial support (no IE support), in which case SMIL might be acceptable.
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.
While we can create crazy things with pure CSS, it's generally harder/more time intensive to create intricate illustrations like the one you provide as an example using CSS, even when manipulating images in addition. Complex CSS animations are often times more difficult to maintain than their JavaScript counterparts as well.
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.
DOM based JavaScript animations are fairly straight forward. Sometimes they have had a bad rep because of terrible animation libraries like jQuery's 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.
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.
You may ask, "Will this replace JavaScript animation libraries?" The answer is "Hopefully some". It's beneficial for everyone for the native browser animation engines to improve and, as they do, some less powerful animation libraries will become useless. With that being said, more powerful animations libraries will still have additional benefits like the ones GSAP noted. Whether or not you need a library once WAAPI is widely supported is still determined by yours needs.
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.
Avoid setInterval and opt for requestAnimationFrame when doing timings in JavaScript (good animation libraries like GSAP do this for you if you use their timelines).
When you can, use the web animations API because it has capabilities for animating with other methods in JavaScript don't have.
There are various ways to animate things on scroll. For an overview, see my post on CSS-Tricks.
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.
In my experience, when doing static animations (animations that are not intended for any interaction with the user) I found that what best worked for me was animating the illustrations in After Effects and after that exporting the final result to a .GIF file. This makes the animation absolutely browser-friendly and guarantees identical visualisation in any device.
If, however, you are looking for something that a user might interact with, I believe Canvas is indeed the way to go, and for that CreateJS does seem to be right for the job with the EaseJS library.
Anyway, according to your example, you could just as well do it with an animated GIF file and get the exact same result.
If you work with After Effects you can use Bodymovin plug-in. It renders your work for mobile and web use. You'll have .json and lottie.js file which you can use in your HTML. But first you'll have to turn off Allow Scripts to Write files and access Network in general settings. When you have that done go to Window, Extensions and find Bodymovin. Select your composition, set location for saving and click render. Put your .json and lottie.js files in your HTML and your work is done. I think that GIF is not best solution because it needs more time to load.
You can download it here: http://aescripts.com/bodymovin Just add your price, or if you want it for free you can just put $0.00...
Here is tutorial for using a Bodymovin and setting your animation in your website with Visual Studio: youtube.com/watch?v=YmPsCD5jRDw&t=282s
If you know HTML and CSS basics then it should be easy for you. That tutorial helped me, I hope that this might help you.
