Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Animation.prototype.finished polyfill
// only polyfill .finished in browsers that already support animate()
if (document.body.animate) {
// Chrome does not seem to expose the Animation constructor globally
if (typeof Animation === 'undefined') {
window.Animation = document.body.animate({}).constructor;
}
if (Animation.prototype.finished === undefined) {
Object.defineProperty(Animation.prototype, 'finished', {
get() {
if (!this._finished) {
this._finished = this.playState === 'finished' ?
Promise.resolve() :
new Promise((resolve, reject) => {
this.addEventListener('finish', resolve, {once: true});
this.addEventListener('cancel', reject, {once: true});
});
}
return this._finished;
}
});
}
}
Owner

simevidas commented Aug 22, 2017

Demo: https://jsbin.com/demokay/edit?js,output; tested in Firefox and Chrome.

Note: This is a fork of Ada Rose’s polyfill. I’ve added support for .catch() (invoked when the animation is aborted), and cleaned up the code a bit.

Nice!!

Owner

simevidas commented Aug 22, 2017

Also works with await (inside an async function):

try { 
    await animation.finished;    
    // animation finished
} catch (e) {
    // animation aborted
}

Demo: https://jsbin.com/yejanag/edit?js,output

:D that's how I've been using it in my own code.

Promises and async functions are nice.

Owner

simevidas commented Aug 22, 2017

After adding both the official Web Animations polyfill, and the above finished polyfill, I got the demos working in Edge, too, but there seems to be an issue in iOS Safari, which I’m unable to debug.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment