In certain cases, the "finished" promise of an animation never gets fulfilled

[antsorin]

Describe the bug

I've found some situations in which calling "await" on the "finished" promise of an animation waits indefinitely. Not sure if this is a bug or not, but the behavior was unexpected for me, so I write here in the hope that it helps.

To Reproduce

1. Start an animation:

const anim = anime({ ... , duration: 1000 });

2. Do something that takes a longer time than the specified animation duration:

await new Promise(resolve => setTimeout(resolve, 1500));

3. Await for the finished promise:

await anim.finished;

4. At this point, as far as I can tell, any code after await anim.finished will never get executed.

Additional way to Reproduce

• Replace the code on Step 2 with anim.pause() or anime.remove with the same selector used for the animation.
• Also, simply calling await anim.finished; twice seems to block indefinitely.

Expected behavior

It would be nice to have a promise that I can count on to be resolved (or maybe rejected) if the animation is no longer running, for any reason (the animation was removed, paused or ended naturally). At the moment it seems like the finished promise never gets fulfilled, if my understanding is correct.

Browser

I've tested with Chrome Version 97.0.4692.99 (64bit Windows) and Firefox 96.0.2 (64-bit Windows);

Additional context

To see this in action, you can check out this codepen. Note: to reproduce the issue, simply uncomment line 17 (Case 1) and the "it works" alert won't get executed anymore. The other cases mentioned above are there two, simply uncomment the case you want to check.

PS. Thank you for developing this library, I really enjoy using it and the documentation is perfectly to the point.

PS2. For my use case, I think I will use something like this to make sure I get a promise that I can safely await for:

function getFinishedPromise(anim) {
  if (anim.completed || anim.paused) {
    return Promise.resolve();
  }

  return anim.finished;
}