[csswg-drafts] [web-animations-2][css-animations-2] How should unspecified trigger range boundaries be resolved? (#11932)

DavMila has just created a new issue for https://github.com/w3c/csswg-drafts:

== [web-animations-2][css-animations-2] How should unspecified trigger range boundaries be resolved? ==
`animation-trigger-range-start`, `animation-trigger-range-end`, `animation-trigger-exit-range-start` and `animation-trigger-exit-range-end` specify the boundaries of the ranges in which an AnimationTrigger will play, pause, reverse, etc. an associated animation. Valid values for these properties are similar to [animation-range](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-range), e.g. “contain 10%”, “cover 100%”, etc.
How should these properties be resolved when not specified?

Some options we can consider are:

1. Using the boundaries of the named range (which defaults to “cover” for view timelines). E.g. “contain 10%” resolves to “contain 10% contain 100%”. This is what’s done for animation-range.

2. Using the boundaries of the scroll range (instead of the view timeline range). E.g. “contain 10%” resolves to “contain 10% scroll 100%”

Option 2 is useful for scenarios  in which an author essentially wants a single point beyond which scrolling would trigger an animation. The author could just write, e.g., “contain 0%”. OTOH if they want to match the “contain” boundary then they have to set “contain 0% contain 100%".

With option 1, the tradeoff is the converse: they can simply specify “contain 0%” to mean “contain 0% contain 100%” and if they mean to refer to the entire scroll range then they have to use the [scroll](https://github.com/w3c/csswg-drafts/issues/9367#:~:text=RESOLVED:%20Keyword%20is%20%60scroll%60) keyword, e.g. “contain 0% scroll 100%”.

I suggest going with option 1 which aligns with animation-range so developers don’t have to remember that the named ranges keywords expand one way for animation-range and a different way for animation-trigger-*range.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11932 using your GitHub account


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

Received on Thursday, 13 March 2025 13:50:50 UTC