npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

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