[scroll-animations-1] Order of pause, setTimeline

[andruud]

With @scroll-timeline it's possible to switch the timeline and pause the animation at the "same" time. E.g. you can toggle a class like: .switch { animation-timeline: other; animation-play-state: paused; }.

During setTimeline, we don't expect the current time to change if the animation is paused [1], but we do expect the current time to "reset" if the animation is playing, hence it matters which order we do things in:

• If we pause first, then set the timeline, the current time will not be updated until we resume, and we'll be paused on the old timeline.
• If we set the timeline first, then pause, the current time is updated right away, and we'll be paused on the new timeline.

Note a huge deal I think, we just need to specify what should happen.

cc @kevers-google @ogerchikov

[flackr]

As a developer I think I would expect to set the timeline first, then pause, as the pause being applied in the same update as the new animation-timeline implies to me that it is meant to pause in the new timeline.

[BorisChiou]

In Gecko, we set the timeline first, and then handle play state. I also prefer to setting the timeline first.

[css-meeting-bot]

The CSS Working Group just discussed [scroll-animations-1] Order of pause, setTimeline, and agreed to the following:

• RESOLVED: Accept the proposal in https://github.com/w3c/csswg-drafts/issues/5653#issuecomment-1271689506

The full IRC log of that discussion

<Rossen_> https://github.com/w3c/csswg-drafts/issues/5653#issuecomment-1271689506
<dael> Rossen_: There's a link to the proposal https://github.com/w3c/csswg-drafts/issues/5653#issuecomment-1271689506
<dael> flackr: If you're using scroll linked animations with css it's possible to switch timeline and change place date in same update. Need a weel defined order
<dael> flackr: chrome and gecko both set timeline first and then apply paused play state which is observable so what to define that way
<dael> Rossen_: Any feedback?
<dael> Rossen_: I see Boris from gecko seemed to have same preference
<bramus> s/weel/well
<dael> flackr: I also think it's more dev friendly because play state change feels it shoudl be related to new timeline
<Rossen_> q?
<dael> Rossen_: Objections?
<dael> RESOLVED: Accept the proposal in https://github.com/w3c/csswg-drafts/issues/5653#issuecomment-1271689506

[fantasai]

Updated in https://github.com/w3c/csswg-drafts/commit/214aa298df040e89ed54200486e725ca85b9c8bc to say:

When multiple 'animation-*' properties are set simultaneously, 'animation-timeline' is updated first, so e.g. a change to 'animation-play-state' applies to the simultaneously-applied timeline specified in 'animation-timeline'.

@flackr @andruud Let me know if this works for you.

[flackr]

Looks good to me.