Re: [csswg-drafts] [css-animations-2] Add animation-trigger for triggering animations when an element is in a timeline's range (#8942)

The CSS Working Group just discussed `[css-animations-2] Add animation-trigger for triggering animations when an element is in a timeline's range`, and agreed to the following:

* `RESOLVED: Draft up this proposal into css-animations-2, come back to WG for review`

<details><summary>The full IRC log of that discussion</summary>
&lt;fantasai> flackr: Common use case for scroll-based animations<br>
&lt;fantasai> ... is to have a time-based animation that starts at a certain scroll position<br>
&lt;fantasai> flackr: in this issue, proposing a property that controls the playback of a time-based animation based on the scroll position<br>
&lt;fantasai> flackr: leveraging the fact that we can define positions in scroll position useing scroll timelines<br>
&lt;fantasai> flackr: so using one timeline (Scroll timeline), control play state of another animation on another timeline (time)<br>
&lt;fantasai> flackr: WE have a proposal that tries to capture the various use cases<br>
&lt;YehonatanDaniv> q+<br>
&lt;fantasai> flackr: We have a new property, I'm calling 'animation-trigger'<br>
&lt;fantasai> flackr: associated with corresponding animation entry<br>
&lt;fantasai> flackr: second value is behavior, come back to that later<br>
&lt;fantasai> flackr: then you specify 2 ranges: range in which you activate the animation, and range in which you de-activate the animation<br>
&lt;fantasai> flackr: behavior has 3 values, one for one-shot animation<br>
&lt;fantasai> flackr: it never runs again after you trigger<br>
&lt;fantasai> flackr: alternate is plays when entering, and reverses when you enter exit range<br>
&lt;fantasai> flackr: final is cancelled [missed]<br>
&lt;bramus> Demos for each range, using a (quick) polyfill: https://github.com/w3c/csswg-drafts/issues/8942#issuecomment-1853045701<br>
&lt;fantasai> flackr: as I say this, I'm realizing that one-shot can be represented with exit range being the entire scroll range<br>
&lt;fantasai> fantasai: that might be confusing though<br>
&lt;fantasai> YehonatanDaniv: we started with view timeline, actually<br>
&lt;fantasai> YehonatanDaniv: scroll is also an option because no limit<br>
&lt;fantasai> YehonatanDaniv: ranges are against a view timeline of the element<br>
&lt;Rossen_> ack YehonatanDaniv<br>
&lt;fantasai> flackr: they're the ranges of the timeline that you specified, whichever you specified<br>
&lt;Rossen_> ack dbaron<br>
&lt;fantasai> dbaron: I felt I only sort-of followed the descriptions of 3 values<br>
&lt;fantasai> dbaron: does one of those values letyou do something where as you scroll down, it plays forward, and if you scroll up it plays backwards?<br>
&lt;fantasai> flackr: that's the 'alternate' value<br>
&lt;bramus> q+<br>
&lt;fantasai> flackr: which reverses the value when you leave the range<br>
&lt;fantasai> flackr: I have a demo<br>
&lt;Rossen_> ack bramus<br>
&lt;fantasai> bramus: I have a bunch of tests to demo the various behaviors<br>
&lt;fantasai> bramus: also built some demos for more real-world use cases<br>
&lt;fantasai> bramus: such as stick element that animates as stuff enters/leaves scrollport<br>
&lt;fantasai> bramus: I could achieve everything I wanted with the options<br>
&lt;fantasai> bramus: but not ergonomic, if you use 'once' you just need to specify where it triggers<br>
&lt;fantasai> bramus: for alternate need t2, and for repeat you need all 4<br>
&lt;fantasai> bramus: depending on the second value might need 1-4 values<br>
&lt;fantasai> bramus: a bit confusing<br>
&lt;fantasai> fantasai: First comment, I think maybe consider some longhands<br>
&lt;Rossen_> ack fantasai<br>
&lt;fantasai> fantasai: second, maybe we want to draft this up so that it's a bit more clear what the proposal is<br>
&lt;fantasai> YehonatanDaniv: Another keyword that was proposed for toggling play state of animation<br>
&lt;fantasai> YehonatanDaniv: for animations that play indefinitely<br>
&lt;fantasai> flackr: yes, one use cases not handled was if you want the animation to just pause outside the range and continue when you re-enter the range<br>
&lt;fantasai> Rossen_: Do we have a proposed path forward?<br>
&lt;fantasai> flackr: Let's write something up in spec-ese, and come back<br>
&lt;fantasai> PROPOSED: Draft up this proposal into css-animations-2<br>
&lt;fantasai>  come back to WG for review<br>
&lt;fantasai> RESOLVED: Draft up this proposal into css-animations-2, come back to WG for review<br>
&lt;fantasai> &lt;br type="intersession"><br>
</details>


-- 
GitHub Notification of comment by css-meeting-bot
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8942#issuecomment-1854342340 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 13 December 2023 16:55:00 UTC