🍿 adobe-animate-embed 🍿

embed canvas animations generated with adobe animate the way it should be.

supports

fully responsive to the parent container
full or partly transparent backgrounds
auto play and rewind on mouse over and out
no need to manually embed createjs (e.g. from an external cdn)
simple caching mechanism when loading published files from adobe animate
control loop, rewind and play/pause
embedding of multiple animations (from the same source) on the same page
different fps in different animations, also manually modify speed
full ie11 support

installation

directly

<script src="adobe-animate-embed.min.js"></script>

library

npm install adobe-animate-embed

import aae from 'adobe-animate-embed';

usage

first create an animation in adobe animate of type html5 canvas and publish the animation with the default values into e.g. /data/animation1/. for more information look at this blog article.

now prepare an empty container:

<div class="anim1"></div>

instantiate the animation by referencing the js file from the folder created above:

let a1 = new aae(
    document.querySelector('.anim1'), // dom element, where the animation should be instantiated
    '/data/animation1/animation1.js' // url to the js file; can be an absolute or relative link
);

it's time to run the animation:

a1.start();

by default the loop setting from the publish settings is used. however, you can change this dynamically:

a1.start(true); // run in loop
a1.start(false); // run once

you even can rewind an animation and play it backwards:

a1.start(null, false); // run forwards
a1.start(null, true); // run backwards

start immediately starts the animation. however, you can also show only the first frame:

a1.start(null, null, false); // no autoplay
a1.resume();

you can manually adjust the speed of an animation:

a1.start(null, null, null, 2); // play at double speed

often you want an animation to play when hovering an element and rewind when unhovering.
the library provides a handy shortcut for that:

a1.hover();

you can stop, pause or destroy the animation at any time:

a1.stop();
a1.pause();
a1.destroy();

caveats

easing functions such as "elastic" are not cleanly supported by Animate CC after the export

vielhuber / adobe-animate-embed