[csswg-drafts] Web Animations Proposal: Add `Animation.started` and `Animation.playing` promises (#5871)

kevinbrewster has just created a new issue for https://github.com/w3c/csswg-drafts:

== Web Animations Proposal: Add `Animation.started` and `Animation.playing` promises ==
# Problem

1. If you manually construct an `Animation` to be played at a later time, there's no way to know when it actually **playing**. 
2. If the animation has a `delay`, there's no way to know when the animation effect actually **starts**.

```javascript
let animation = new Animation(new KeyframeEffect(element, { opacity: 1 }, { delay: 1000, duration: 2000 }));

animation.ready.then(_ => {
    console.log("animation is ready"); // this is logged immediately
});
window.setTimeout(_ => {
 animation.play()
}, 1500);

// When will animation play?
// When will the delay period end?
```

# Proposal

Introduce two new promises on `Animation`:

1. `Animation.playing`: returns a `Promise` which resolves once the animation has started playing.
2. `Animation.started`: returns a `Promise` which resolves once the `delay` period is over and the effect has started

```javascript
let animation = new Animation(new KeyframeEffect(element, { opacity: 1 }, { delay: 1000, duration: 2000 }));

animation.ready.then(_ => {
    console.log("animation is ready"); // @ time = 0
});
animation.playing.then(_ => {
    console.log("animation is playing"); // @ time = 1500
});
animation.started.then(_ => {
    console.log("animation effect started"); // @ time = 2500
});
animation.finished.then(_ => {
    console.log("animation effect started"); // @ time = 4500
});

window.setTimeout(_ => {
 animation.play()
}, 1500);


```


# Alternatives

1. `Animation.played` instead of `Animation.playing` for consistency in tense with `Animation.finished`
2. `Animation.effectStarted` instead of `Animation.started` for clarification

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5871 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 13 January 2021 20:19:40 UTC