Skip to content

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;
Copy link

AdaRoseCannon commented Aug 22, 2017

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

Promises and async functions are nice.

Copy link

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.

Copy link

davej commented Jul 12, 2019

I was getting an error in Safari 13 (tech preview):

Unhandled Promise Rejection: TypeError: The Animation.finished getter can only be used on instances of Animation

So I forked this to fix the error:


Copy link

simevidas commented Jul 14, 2019

👍 Good to see more (full?) animation API support in the next version of Safari.

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