A micro library to reduce clutter of the the Web Animation API and create reusable KeyframeEffect components.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
scripts
README.md

README.md

MagicLib

A micro library to reduce clutter of the the Web Animation API and create reusable KeyframeEffect components.

Reduces this:

const showThis = document.querySelector('#showThis')
const keyFrameEffect = new KeyframeEffect(
	showThis,
	[
		{ transform: 'scale(0) translateY(-10%)', opacity: 0 },
		{ transform: 'scale(1) translateY(0)', opacity: 1 }
	], {
		duration: 300,
		iterations: 1,
		easing: 'ease-out',
		fill: 'forwards',
		delay: 300
	}
)
const show = new Animation(keyFrameEffect, document.timeline);
show.play();

To this:

const showThis = document.querySelector('#showThis');
const show = new Magic(showThis, 'show');
show.play();

How to use it

  1. Add Magic.js and /magic/ directory to your scripts directory
  2. Use
const animation = new Magic( element, 'animationName' )

Create a new animation

  1. Create a new animationName.js to /magic/ directory
  2. Import it in the magic/index.js
  3. Use
const animationName = new Magic( element, 'animationName' )

The Magic object is actually the Animation object. This makes you able to use functions like:

let animationsPromise = animationName.finished

For more information about the Web Animations API go to: Web Animations API | MDN

The Web Animation API is not very well supported as of today (13-02-2018), this demo does work in Firefox Nightly. For a polyfill add this to your HTML:

<script async src="web-animations.min.js"></script>

Mees Rutten, 2018