Skip to main content
stephs28662241
stephs28662241
Participating Frequently
October 9, 2017
Answered

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

  • October 9, 2017
  • 2 replies
  • 1471 views

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.

This topic has been closed for replies.
Correct answer albertd9194959

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,

2 replies

albertd9194959
albertd9194959Correct answer
Inspiring
April 6, 2018

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,

K
KeelyM
Inspiring
May 30, 2018

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.

Preran
Preran
Legend
October 12, 2017

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

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices