Best tools for Web Animations

Question

If a site has several short, simple, web-based animations what software would be the best to create them in? (Best in terms of (i) how quickly the animations can be made; (ii) how big the animation files are.) In particular, I am referring to my site Socratease

If you click on any of the modules, you will soon notice that there are animations that accompany most learning screens. The animations are there to make the content engaging. The animations have mostly been done with Adobe Animate and Illustrator. It gets published as an HTML5 Canvas element, and the Javascript file is stored as a separate file. When the webpage loads, it loads the JS file and renders the animation. We had to resort to Canvas because gifs didn't have good enough quality, for that file size. And mp4s don't auto-load on certain browsers. I would very much appreciate it if I get help with the following:

1. This method seems like a bit of a hack: exporting to canvas, etc. I don't think it is very standard. Are there any long-term challenges I should be aware of? There are currently a few dozen animations, and my initial impression is that I think this system is scalable.
2. Apart from Animate, I could also use After Effects. People I have spoken to seem to be more familiar with AE than with Animate. But, when I try to export an AE animation as a canvas element, the files are quite large in size, sometimes up to 5 times as large. As most screens of mine will have animations, the file size is a big issue. For such simple animations, is AE a bit of an overkill?
3. If the current architecture is the optimal one, are there other things I can do to optimise the animations? Any non-default settings I can choose while publishing, etc that would reduce the file size, or render using less processing power?

Answer 1

There's a far more elaborate answer than this but, in terms of current industry trends and trajectories, I can keep this relatively short.

Greensock was quite popular for canvas-based animations until recently. It was often the main javascript code powering canvas animation you'd find on larger sites. It could be done manually, in code, using assets drawn in your software of preference, or automated using a variety of third-party software, such as Adobe Animate.

A lot has changed quickly thanks to bodymovin and the industry has moved onto it at a pretty rapid pace as - in terms of automated web animation (interpolation of keyframes, etc.) - it has brought the potential that bit closer to video standards.

How? By using one of the main tools the video industry uses: After Effects, which you appear to be familiar with. Bodymovin is an export tool for After Effects that can translate the capabilities of the various interpolation of frames After Effects uses into a json file that can be understood by HTML canvas using a bodymovin javascript player. One of After Effects greatest strengths, in terms of animation, is the amount of properties each asset presents that can be keyframed by a variety of interpolation methods (e.g. how to get from frame A to B in 5 seconds. Is a sharp burst start and sudden stop, or a gradual speed increase/descrease? etc). Although aspects of this are possible with existing web animation tools, After Effects offers better and easier to adjust results, as well as greater capabilities with following paths and other tools relevant to vector animation.

It's been so popular that AirBnb and Facebook dev teams have released competing tools to bring bodymovin to iOS and Android apps.

So why are they all so eager? As well as what I've mentioned above, a big selling point is that it's resolution independent. Video files (whether they be mp4, webm, gif, gifv) are at a fixed resolution. The web has seen a sharp rise in use of svg images for icons as it's primarily a vector file and can be used at any size without loss of detail. You know you can use the same file on a 4k tv as a mobile device without worrying about detail loss (to a point). Vector animation, such as what bodymovin exports from After Effects does the same for video, which fits in line with responsive web sites and apps needing to work on a variety of screen sizes (and, as a bonus, without using Flash). The video content can also be coded to be aware of screen size change and adjust only aspects of the video to suit the new screen - not all of it. The file sizes are typically drastically smaller than what a raster video export of the same would have been.

It's not clear from your question (number 2) how you attempted to export After Effects to canvas? Until bodymovin, it was a niche possibility that was clumsy and not recommended.

Answer 2

In my opinion, we should be aiming to achieve animation by using, as much as possible, the basic building blocks of the web : HTML,CSS and Javascript.

Nowadays, you can create some really impressive animations with CSS alone. The type of animations that not long ago were only possible with Flash or Javascript.

My preference for complex web animations is using After Effects + BodyMovin. It allows you to render complex After Effects animations as a json file that you can then render in the browser on svg, html and canvas.

Check it out!