csswg-drafts
csswg-drafts copied to clipboard
[scroll-animations-1] Order of pause, setTimeline
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
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.
In Gecko, we set the timeline first, and then handle play state. I also prefer to setting the timeline first.
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
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.
Looks good to me.