adobe-animate-embed
v1.0.8
Published
embed canvas animations generated with adobe animate the way it should be.
Downloads
2
Readme
🍿 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