Using HTML5 animations on HTML5 canvas instead of .mp4 video files?

[stephs28662241]

Hello,

I am hoping that there is an answer to this as I have been searching for a few days now and no luck.

So I have created some animations in Adobe After Effects, and saved them out as html5 files (using bodymovin).

These animations were created for use in an interactive demonstration app, which I have built using Adobe Animate CC (HTML5 Canvas). So within this document there are a few different pages linked with buttons, and I have used the video component to place the animations on each page as .mp4 files. This works ok, but I would like to know how to use the html5 animations instead of .mp4s?

Any suggestions would be greatly appreciated.

Thanks.

[Preran]

Am asking around to see if someone has an answer. Will let you know if I hear something from them.

[albertd9194959 · Accepted solution]

It will require some tweaking, but it can be done.

A very simple example bellow:

Under Global add:

bodymovin.js

On the first frame:

var animation1 = document.createElement("script"); 

animation1.src = "data.js"; 

document.head.appendChild(animation1); 

data.js is any one of the demo .js files found in the demo folder, the json files break things.

Regards,

[KeelyM]

Hi, I'm a looking to do something similar and was wondering where exactly do you get the data.js file? When I export an AE animation the demo only exports to an .html file and the data file is a .json.

Thanks.