Skip to content

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

Closed
@majido

Description

@majido

Proposal

Web Animations allows creation of AnimationTimeline but it does not support using a custom timeline in element.animate() method. 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:

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.

Add a third parameter just for timeline

This is an example of how it may work:

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions