[csswg-drafts] [web-animations-1] Allow setting timeline in Element.animate() (#5013)

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

== [web-animations-1] Allow setting timeline in Element.animate() ==
## Proposal

Web Animations allows creation of `AnimationTimeline` but it does not support using a custom timeline in [`element.animate()` method](https://drafts.csswg.org/web-animations/#dom-animatable-animate). The only option is to use Animation constructor directly.

I believe as we get closer to having `ScrollTimeline` the ability to continue to use the familiar and simple to use `Element.animate()` for scroll linked animations is important. This issue is here to consider introducing a way to to pass in a timeline as part of `Element.animate(keyframes, options)`.

## Syntax Options

If it is decided that we want this, here are some ideas on syntax:

### Extend options to have a timeline member
This is an example of how it may work:
```js
const timeline = new ScrollTimeline({source: $some_scroller, timeRange: 1000});
$div.animate({opacity: [0, 1]}, {delay: 100, duration: 500, timeline: timeline});
```
Pros:
  * Simple to undestand
 * keeps timing related options in a single dictionary (I consider timeline a timing related option)
Cons:
 * At the moment spec passes options verbatim to KeyframeEffect but timeline is an animation concept so we have to separate these in spec before passing the options to keyframes. This is not a big deal IMHO.

FWIW, this is the method that @flackr  has chosen in [their scroll-timeline polyfill](https://github.com/flackr/scroll-timeline/).

### Add a third parameter just for timeline

This is an example of how it may work:
```js
const timeline = new ScrollTimeline({source: $some_scroller, timeRange: 1000});
$div.animate({opacity: [0, 1]}, {delay: 100, duration: 500}, {timeline: timeline} /* or just timeline */);
```

I find this a bit less ergonomic that the previous one. It may be more appealing if there were other animation specific options.



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

Received on Monday, 27 April 2020 18:46:17 UTC