[web-animations-2] [scroll-animations] usage of timeline range offsets in the Web Animations API

[graouts]

The Scroll-driven Animations specification defines Named Timeline Range Keyframe Selectors allowing specific portions of a scrollable area to be targeted while rendering animations. Specifically, the combination of a <timeline-range-name> and a <length-percentage> such as cover 10%.

The Scroll-driven Animations specification discusses this only within the context of CSS-declared @keyframes rules, but the Web Animations specification does not discuss how such values can be used through the Web Animations API and the various methods it defines to consume keyframes: animate(), setKeyframes() and the KeyframeEffect constructor. It doesn't discuss either how such keyframe offsets would be dealt with in a call to getKeyframes().

There are a fair few WPT tests related to this, too many to list here, so the Chrome team has given this some thinking and WebKit will be getting support for this in short order, but this entire area needs to be specified and the merits and the approach taken by the Chrome team need to be discussed.

[graouts]

Cc @flackr, @andruud, @kevers-google and @bramus.

[flackr]

In the Web Animations spec, ranges can be used by rangeStart and rangeEnd properties on the animation options (discussed in #7589), and #10000 is proposing supporting them for keyframe offsets as well. These are represented as a TimelineRangeOffset when returned and we would presumably do the same for offsets.

[graouts]

Yes, that is what Chrome implements and it sounds reasonable. We need updates to the spec to specify expanded variants in the IDL for the various dictionaries and the minutiae of how to represent unresolved computed offsets (Chrome uses NaN) and the relative sorting of keyframes with null, double and TimelineRangeOffset specified offsets.

[flackr]

FYI for sorting of keyframes, see #8507.

[ydaniv]

There's also a proposal to allow them in the Animation constructor.

[css-meeting-bot]

The CSS Working Group just discussed [web-animations-2] [scroll-animations] usage of timeline range offsets in the Web Animations API, and agreed to the following:

• RESOLVED: Clarify the spec to answer / clarify graouts' questions
• RESOLVED: Define computed keyframe offsets

The full IRC log of that discussion

<emilio> flackr: I think there's consensus, just some things might need to be spec'd
<emilio> ... I think we have well defined behavior
<emilio> ... the one interesting one was the computed offset of keyframes
<emilio> astearns: so the proposal is to edit the spec to answer / clarify graouts' questions
<emilio> flackr: we've discussed most of this already
<emilio> ... only one we haven't is ??
<emilio> ... we should discuss that once we have a concrete proposal
<emilio> PROPOSED: Clarify the spec to answer / clarify graouts' questions
<emilio> PROPOSED: Define computed keyframe offsets
<emilio> RESOLVED: Clarify the spec to answer / clarify graouts' questions
<emilio> RESOLVED: Define computed keyframe offsets