Best way to wait for end of animation

[felixranesberger]

Hi, I was wondering what the best way is, to await the animate() function.

Background: I want to abort a event listener, when the animate function is finished.

Currently I'm using this workaround:

async function animateHidePreview() {
    animate(element, {
      opacity: 0,
    }, { duration: defaultAnimationDuration / 1000 });

    await new Promise(resolve => setTimeout(resolve, defaultAnimationDuration));
  }

[mattgperry]

Here you can literally do “await animate()”

[felixranesberger]

So animate is a async function?
Because the types show that AnimationPlaybackControls is returned directly without a promise.
That's why I though that I couldn't use await.
Or am I missing something?

Also thanks for the quick answer! 🚀

[felixranesberger]

[mattgperry]

You can also await Promise-likes and one of the controls is “then” so you can also do

controls.then(() => next thing)

[felixranesberger]

Aaaah, now I get it. Took some time to understand what you meant, because I didn't know, that you can also await functions that implement a .then() function.

Thanks for answering my question :)