Skip to content

hgl/animatable

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

A polyfill for the Web Animations spec

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published