Change custom effects from AnimationEffects to onsample functions. Custom effects should now be created by setting the onsample attribute of a KeyframeEffect.
For example, this is deprecated:
var myEffect = new KeyframeEffect(
element,
function(timeFraction, target, effect) {
target.style.opacity = timeFraction;
},
1000);
var myAnimation = document.timeline.play(myEffect);
and this should be used insead:
var myEffect = new KeyframeEffect(element, [], 1000);
effect.onsample = function(timeFraction, effect, animation) {
effect.target.style.opacity = timeFraction;
};
var myAnimation = document.timeline.play(myEffect);
timeline.play()
to be called with no argumentsweb-animations-next
and web-animations-next-lite
were
executed on top of a native element.animate
.Deprecated AnimationTiming.playbackRate
.
For example, this is no longer supported:
var player = element.animate(
keyframes,
{duration: 1000, playbackRate: 2});
Use AnimationPlayer.playbackRate
instead:
var player = element.animate(
keyframes,
{duration: 1000});
player.playbackRate = 2;
If you have any feedback on this change, please start a discussion on the public-fx mailing list: http://lists.w3.org/Archives/Public/public-fx/
Or file an issue against the specification on GitHub: https://github.com/w3c/web-animations/issues/new
play()
and reverse()
should not force a start timesrequestAnimationFrame
ids and cancelAnimationFrame
The web-animations-js hackers are pleased to announce the release of a new codebase for the Web Animations Polyfill: https://github.com/web-animations/web-animations-js
The previous polyfill has been moved to: https://github.com/web-animations/web-animations-js-legacy
The new codebase is focused on code-size -- our smallest target is now only 33kb or 11kb after gzip.
We've implemented native fallback. If the target browser provides Web Animations features natively, the Polyfill will use them.
We now provide three different build targets:
web-animations.min.js
- Tracks the Web Animations features that
are supported natively in browsers. Today that means Element.animate
and Playback Control in Chrome. If you’re not sure what features you
will need, start with this.
web-animations-next.min.js
- All of web-animations.min.js plus
features that are still undergoing discussion or have yet to be
implemented natively.
web-animations-next-lite.min.js
- A cut down version of
web-animations-next, removes several lesser used property handlers
and some of the larger and less used features such as matrix
interpolation/decomposition.
Not all features of the previous polyfill have been ported to the new codebase; most notably mutation of Animations and Groups and Additive Animations are not yet supported. These features are still important and will be implemented in the coming weeks.