Header
Share

Best tools for Web Animations

Hello,

I am the founder of www.socratease.in which is an Educational Technology application with a very different pedagogy. 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 a 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:

(i) 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 I think this is a scalable system.

(ii) 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?

(iii) 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?

Thanks!

Products
Ratings
3 / 5 • 1 Rating

Comments (3)

Write a reply...
or Join for free to view all comments and participate in the discussion.

Joseph Labrecque

Posted on 10/31/17 1:01:36 PM Permalink

​Hi. Will try to address your inquiries but may require follow-up:

​(i) Canvas is a proper HTML5 element - why do you see it as a hack? It is completely standard, but one approach to web animation and interactivity among many for sure.

​(ii) After Effects can publish to canvas element? I thought it could only publish video?

​(iii) This all depends on your assets and project type. There are ways to optimize any vector content by reducing complexity - and if based upon bitmap data, the less pixels used will help.

Jayanth Neelakanta

Posted on 10/31/17 1:29:03 PM Permalink

Hi Joseph,

Thanks for the response. Please find my reply below:

(i) I mean, using Animate to make Canvas Elements. Currently, I take the output JS and modify a couple of attributes in the JS file so that the same HTML on my server can render this JS too (call this ServerHTML). For instance, there is an animation_id field in the JS and HTML that Animate outputs. So, when the HTML file is opened, it calls the JS and references the id. Because I don't want to store one HTML file per animation, I have copied the code snippet from the Animate HTML file to ServerHTML with a fixed Animation ID. In the future, if Adobe changes the output file, etc, I will have to change the structure for new animations. So, my concern is not so much HTML5, more Animate's Publish feature.

(ii) There is a plugin called bodymovin which converts AE projects to other formats like svg/canvas, etc

Joseph Labrecque

Posted on 10/31/17 2:11:44 PM Permalink

​Okay - gotcha. I don't see why the team would change the way this is produced. I haven't heard anything to that effect from the team. Aside from that - the output is very flexible either vis HTML5 Canvas Templates or even a custom extension - so even if it was modified... you could likely get around any such changes.

Footer