Skip to content

Latest commit

 

History

History
43 lines (30 loc) · 1.12 KB

README.md

File metadata and controls

43 lines (30 loc) · 1.12 KB

Animatable

A polyfill for the Web Animations spec.

Implemented AnimationTimeline, Animation, KeyframeEffect (only its AnimationEffect part). All other code borrowed from web-animations-next.

Usage

$ npm install -g jspm
$ jspm install
$ make

Look for the animatable.js file in the root folder.

Differences with web-animations-next:

  • Closely follow the spec algorithms.
  • Implement the new APIs.
  • Live animation timing modification.
var anim = elem.animate([
	{opacity: 1}, { opacity: 0 }
], { duration: 100, fill: "forwards"});
anim.finished.then(function () {
	anim.effect.timing.fill = "none";
	console.log(elem.style.opacity);
});

Deviations from the spec

  • Stop periodically updating the timeline if none of the associated animations is running.
    • But reading its current time should still give the correct result.
  • Same limitations as web-animations-next (e.g., no additive animation).

Caution

  • Only manually tested. Very alpha.
  • Written in es2015, require shims in older browsers.