[web-animations-2][css-animations-2] How should unspecified trigger range boundaries be resolved? #11932
Comments
|
I think option 1 is what authors would more likely expect when using view timelines. Also, like you said, it's nice if we can have a consistent resolving for ranges across different properties. Also notice that exit range properties allow an I suppose if you set only |
Ah yes, perhaps another issue worth resolving on: I agree that it would be nice to have a default value for the exit range boundaries that says "match the default range" but I know there's been some concern (example) in the past about specifying This would mean It would also mean that an author that means to specify "cover" range (which "normal" would have meant) as the exit range but not as the default range in the shorthand ( |
That is why I added the You think it's less appropriate here?
In this case I'd prefer not having to parse
That is a separate issue I briefly raised here. |
|
While re-reading the thread that sparked scroll-triggered animations, I noticed this question was also covered in that thread. See #8942 (comment) and the next few comments. My first interpretation was that But then @flackr clarified that my interpretation was incorrect and that we should expand to “infinite” behavior instead of So using |
|
That is only if you specifically want the single triggering behavior, like the comment says:
In that case you need that infinite behavior. So if you want a repeating/alternating triggering with a single point you need to specify something like: But omitting a range boundary is not the same as trying to specify a single boundary. |
I guess this comes down to something like bikeshedding because both approaches (expanding similar to |
So what you're saying is not really bikeshedding, but rather resolve on a different default value for Well we should also take into account not specifying anything, keeping both start and end as |
|
Thinking about this a bit more: since the capabilities are the same either way, making it necessary for an author to have to specify, for example, I think the alternate example in @flackr 's demo demonstrates a common pattern where the element slides in and out at the bottom and top of the viewport, corresponding (roughly) to the cover range. I think it makes sense for the default setting, where a I guess one other option is to make the default range dependent on the type of trigger, e.g. Also, for the exit range I think using |
|
Great, so IIUC this means close as no change for now? |
|
Thought I'd post one detail that occurred to me about this:
and
The first case represents a slight expansion of the meaning of |
I don't think I understood this. And for: The point is that in the same range |
Right, I was mistaken about the meaning of
Because of the way I thought |
Sure, I'm open to suggestions if we wish to bikeshed the I'll agenda+ this issue with issue: |
animation-trigger is a shorthand that specifies, among other properties, 4 points that represent the boundaries at which the trigger will act on its animation(s). The 4 points correspond to the CSS properties: * animation-trigger-range-start * animation-trigger-range-end * animation-trigger-exit-range-start * animation-trigger-exit-range-end The first 2 properties define the "trigger range" and the last two define the "exit range." animation-trigger-exit-range is the shorthand for the last two properties. The default value for the exit range boundaries is "auto" which can mean one of two things: 1. Primarily,the meaning of auto is "match the trigger range." 2. In the case of animation-trigger-exit-range-end, if a named range, e.g. "contain" has been specified for animation-trigger-exit-range-start, then auto should be interpreted as the end of that named range, similar to normal for animation-range. The slightly expands the meaning of normal so that the case of "auto normal" has the same meaning as "auto auto", i.e. "match the trigger range." Note: This has not yet been resolved on by the CSS working group but it is being discussed[2] and is how we're thinking about how it all should work. [1] https://drafts.csswg.org/css-animations-2/#animation-trigger-exit-range-start [2] w3c/csswg-drafts#11932 Bug: 390314945 Change-Id: I3a76401e0bf40bebe2960b96d11ba96bb010e705 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6426886 Reviewed-by: Anders Hartvoll Ruud <[email protected]> Commit-Queue: David Awogbemila <[email protected]> Cr-Commit-Position: refs/heads/main@{#1444687}
animation-trigger is a shorthand that specifies, among other properties, 4 points that represent the boundaries at which the trigger will act on its animation(s). The 4 points correspond to the CSS properties: * animation-trigger-range-start * animation-trigger-range-end * animation-trigger-exit-range-start * animation-trigger-exit-range-end The first 2 properties define the "trigger range" and the last two define the "exit range." animation-trigger-exit-range is the shorthand for the last two properties. The default value for the exit range boundaries is "auto" which can mean one of two things: 1. Primarily,the meaning of auto is "match the trigger range." 2. In the case of animation-trigger-exit-range-end, if a named range, e.g. "contain" has been specified for animation-trigger-exit-range-start, then auto should be interpreted as the end of that named range, similar to normal for animation-range. The slightly expands the meaning of normal so that the case of "auto normal" has the same meaning as "auto auto", i.e. "match the trigger range." Note: This has not yet been resolved on by the CSS working group but it is being discussed[2] and is how we're thinking about how it all should work. [1] https://drafts.csswg.org/css-animations-2/#animation-trigger-exit-range-start [2] w3c/csswg-drafts#11932 Bug: 390314945 Change-Id: I3a76401e0bf40bebe2960b96d11ba96bb010e705 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6426886 Reviewed-by: Anders Hartvoll Ruud <[email protected]> Commit-Queue: David Awogbemila <[email protected]> Cr-Commit-Position: refs/heads/main@{#1444687}
animation-trigger is a shorthand that specifies, among other properties, 4 points that represent the boundaries at which the trigger will act on its animation(s). The 4 points correspond to the CSS properties: * animation-trigger-range-start * animation-trigger-range-end * animation-trigger-exit-range-start * animation-trigger-exit-range-end The first 2 properties define the "trigger range" and the last two define the "exit range." animation-trigger-exit-range is the shorthand for the last two properties. The default value for the exit range boundaries is "auto" which can mean one of two things: 1. Primarily,the meaning of auto is "match the trigger range." 2. In the case of animation-trigger-exit-range-end, if a named range, e.g. "contain" has been specified for animation-trigger-exit-range-start, then auto should be interpreted as the end of that named range, similar to normal for animation-range. The slightly expands the meaning of normal so that the case of "auto normal" has the same meaning as "auto auto", i.e. "match the trigger range." Note: This has not yet been resolved on by the CSS working group but it is being discussed[2] and is how we're thinking about how it all should work. [1] https://drafts.csswg.org/css-animations-2/#animation-trigger-exit-range-start [2] w3c/csswg-drafts#11932 Bug: 390314945 Change-Id: I3a76401e0bf40bebe2960b96d11ba96bb010e705 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6426886 Reviewed-by: Anders Hartvoll Ruud <[email protected]> Commit-Queue: David Awogbemila <[email protected]> Cr-Commit-Position: refs/heads/main@{#1444687}
…mation-trigger-exit-range, a=testonly Automatic update from web-platform-tests [animation-trigger] Support auto for animation-trigger-exit-range animation-trigger is a shorthand that specifies, among other properties, 4 points that represent the boundaries at which the trigger will act on its animation(s). The 4 points correspond to the CSS properties: * animation-trigger-range-start * animation-trigger-range-end * animation-trigger-exit-range-start * animation-trigger-exit-range-end The first 2 properties define the "trigger range" and the last two define the "exit range." animation-trigger-exit-range is the shorthand for the last two properties. The default value for the exit range boundaries is "auto" which can mean one of two things: 1. Primarily,the meaning of auto is "match the trigger range." 2. In the case of animation-trigger-exit-range-end, if a named range, e.g. "contain" has been specified for animation-trigger-exit-range-start, then auto should be interpreted as the end of that named range, similar to normal for animation-range. The slightly expands the meaning of normal so that the case of "auto normal" has the same meaning as "auto auto", i.e. "match the trigger range." Note: This has not yet been resolved on by the CSS working group but it is being discussed[2] and is how we're thinking about how it all should work. [1] https://drafts.csswg.org/css-animations-2/#animation-trigger-exit-range-start [2] w3c/csswg-drafts#11932 Bug: 390314945 Change-Id: I3a76401e0bf40bebe2960b96d11ba96bb010e705 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6426886 Reviewed-by: Anders Hartvoll Ruud <[email protected]> Commit-Queue: David Awogbemila <[email protected]> Cr-Commit-Position: refs/heads/main@{#1444687} -- wpt-commits: c4a6052734703e2e17d99722e6486475d443c18f wpt-pr: 51916
…mation-trigger-exit-range, a=testonly Automatic update from web-platform-tests [animation-trigger] Support auto for animation-trigger-exit-range animation-trigger is a shorthand that specifies, among other properties, 4 points that represent the boundaries at which the trigger will act on its animation(s). The 4 points correspond to the CSS properties: * animation-trigger-range-start * animation-trigger-range-end * animation-trigger-exit-range-start * animation-trigger-exit-range-end The first 2 properties define the "trigger range" and the last two define the "exit range." animation-trigger-exit-range is the shorthand for the last two properties. The default value for the exit range boundaries is "auto" which can mean one of two things: 1. Primarily,the meaning of auto is "match the trigger range." 2. In the case of animation-trigger-exit-range-end, if a named range, e.g. "contain" has been specified for animation-trigger-exit-range-start, then auto should be interpreted as the end of that named range, similar to normal for animation-range. The slightly expands the meaning of normal so that the case of "auto normal" has the same meaning as "auto auto", i.e. "match the trigger range." Note: This has not yet been resolved on by the CSS working group but it is being discussed[2] and is how we're thinking about how it all should work. [1] https://drafts.csswg.org/css-animations-2/#animation-trigger-exit-range-start [2] w3c/csswg-drafts#11932 Bug: 390314945 Change-Id: I3a76401e0bf40bebe2960b96d11ba96bb010e705 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6426886 Reviewed-by: Anders Hartvoll Ruud <[email protected]> Commit-Queue: David Awogbemila <[email protected]> Cr-Commit-Position: refs/heads/main@{#1444687} -- wpt-commits: c4a6052734703e2e17d99722e6486475d443c18f wpt-pr: 51916
In crrev.com/c/6426886 we added support for parsing "auto" for the animation-trigger-exit-range longhands, but didn't actually use use the auto value in computing the exit range for the trigger. This cl does that. The auto keyword means that the exit range should match the default/trigger range. Note: This has not yet been resolved on by the CSS working group but it is being discussed[2] and is how we're thinking about how it all should work. [1] https://drafts.csswg.org/css-animations-2/#animation-trigger-exit-range-start [2] w3c/csswg-drafts#11932 Bug: 390314945 Change-Id: Ic397947bd40c1ae22df2339ae75c64e60787a0d9 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6438242 Commit-Queue: David Awogbemila <[email protected]> Reviewed-by: Kevin Ellis <[email protected]> Cr-Commit-Position: refs/heads/main@{#1446557}
…mation-trigger-exit-range, a=testonly Automatic update from web-platform-tests [animation-trigger] Support auto for animation-trigger-exit-range animation-trigger is a shorthand that specifies, among other properties, 4 points that represent the boundaries at which the trigger will act on its animation(s). The 4 points correspond to the CSS properties: * animation-trigger-range-start * animation-trigger-range-end * animation-trigger-exit-range-start * animation-trigger-exit-range-end The first 2 properties define the "trigger range" and the last two define the "exit range." animation-trigger-exit-range is the shorthand for the last two properties. The default value for the exit range boundaries is "auto" which can mean one of two things: 1. Primarily,the meaning of auto is "match the trigger range." 2. In the case of animation-trigger-exit-range-end, if a named range, e.g. "contain" has been specified for animation-trigger-exit-range-start, then auto should be interpreted as the end of that named range, similar to normal for animation-range. The slightly expands the meaning of normal so that the case of "auto normal" has the same meaning as "auto auto", i.e. "match the trigger range." Note: This has not yet been resolved on by the CSS working group but it is being discussed[2] and is how we're thinking about how it all should work. [1] https://drafts.csswg.org/css-animations-2/#animation-trigger-exit-range-start [2] w3c/csswg-drafts#11932 Bug: 390314945 Change-Id: I3a76401e0bf40bebe2960b96d11ba96bb010e705 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6426886 Reviewed-by: Anders Hartvoll Ruud <andruudchromium.org> Commit-Queue: David Awogbemila <awogbemilachromium.org> Cr-Commit-Position: refs/heads/main{#1444687} -- wpt-commits: c4a6052734703e2e17d99722e6486475d443c18f wpt-pr: 51916 UltraBlame original commit: b11cbb083e2b4c71390d19c19137baec901618f4
…mation-trigger-exit-range, a=testonly Automatic update from web-platform-tests [animation-trigger] Support auto for animation-trigger-exit-range animation-trigger is a shorthand that specifies, among other properties, 4 points that represent the boundaries at which the trigger will act on its animation(s). The 4 points correspond to the CSS properties: * animation-trigger-range-start * animation-trigger-range-end * animation-trigger-exit-range-start * animation-trigger-exit-range-end The first 2 properties define the "trigger range" and the last two define the "exit range." animation-trigger-exit-range is the shorthand for the last two properties. The default value for the exit range boundaries is "auto" which can mean one of two things: 1. Primarily,the meaning of auto is "match the trigger range." 2. In the case of animation-trigger-exit-range-end, if a named range, e.g. "contain" has been specified for animation-trigger-exit-range-start, then auto should be interpreted as the end of that named range, similar to normal for animation-range. The slightly expands the meaning of normal so that the case of "auto normal" has the same meaning as "auto auto", i.e. "match the trigger range." Note: This has not yet been resolved on by the CSS working group but it is being discussed[2] and is how we're thinking about how it all should work. [1] https://drafts.csswg.org/css-animations-2/#animation-trigger-exit-range-start [2] w3c/csswg-drafts#11932 Bug: 390314945 Change-Id: I3a76401e0bf40bebe2960b96d11ba96bb010e705 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6426886 Reviewed-by: Anders Hartvoll Ruud <andruudchromium.org> Commit-Queue: David Awogbemila <awogbemilachromium.org> Cr-Commit-Position: refs/heads/main{#1444687} -- wpt-commits: c4a6052734703e2e17d99722e6486475d443c18f wpt-pr: 51916 UltraBlame original commit: b11cbb083e2b4c71390d19c19137baec901618f4
…mation-trigger-exit-range, a=testonly Automatic update from web-platform-tests [animation-trigger] Support auto for animation-trigger-exit-range animation-trigger is a shorthand that specifies, among other properties, 4 points that represent the boundaries at which the trigger will act on its animation(s). The 4 points correspond to the CSS properties: * animation-trigger-range-start * animation-trigger-range-end * animation-trigger-exit-range-start * animation-trigger-exit-range-end The first 2 properties define the "trigger range" and the last two define the "exit range." animation-trigger-exit-range is the shorthand for the last two properties. The default value for the exit range boundaries is "auto" which can mean one of two things: 1. Primarily,the meaning of auto is "match the trigger range." 2. In the case of animation-trigger-exit-range-end, if a named range, e.g. "contain" has been specified for animation-trigger-exit-range-start, then auto should be interpreted as the end of that named range, similar to normal for animation-range. The slightly expands the meaning of normal so that the case of "auto normal" has the same meaning as "auto auto", i.e. "match the trigger range." Note: This has not yet been resolved on by the CSS working group but it is being discussed[2] and is how we're thinking about how it all should work. [1] https://drafts.csswg.org/css-animations-2/#animation-trigger-exit-range-start [2] w3c/csswg-drafts#11932 Bug: 390314945 Change-Id: I3a76401e0bf40bebe2960b96d11ba96bb010e705 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6426886 Reviewed-by: Anders Hartvoll Ruud <andruudchromium.org> Commit-Queue: David Awogbemila <awogbemilachromium.org> Cr-Commit-Position: refs/heads/main{#1444687} -- wpt-commits: c4a6052734703e2e17d99722e6486475d443c18f wpt-pr: 51916 UltraBlame original commit: b11cbb083e2b4c71390d19c19137baec901618f4
…mation-trigger-exit-range, a=testonly Automatic update from web-platform-tests [animation-trigger] Support auto for animation-trigger-exit-range animation-trigger is a shorthand that specifies, among other properties, 4 points that represent the boundaries at which the trigger will act on its animation(s). The 4 points correspond to the CSS properties: * animation-trigger-range-start * animation-trigger-range-end * animation-trigger-exit-range-start * animation-trigger-exit-range-end The first 2 properties define the "trigger range" and the last two define the "exit range." animation-trigger-exit-range is the shorthand for the last two properties. The default value for the exit range boundaries is "auto" which can mean one of two things: 1. Primarily,the meaning of auto is "match the trigger range." 2. In the case of animation-trigger-exit-range-end, if a named range, e.g. "contain" has been specified for animation-trigger-exit-range-start, then auto should be interpreted as the end of that named range, similar to normal for animation-range. The slightly expands the meaning of normal so that the case of "auto normal" has the same meaning as "auto auto", i.e. "match the trigger range." Note: This has not yet been resolved on by the CSS working group but it is being discussed[2] and is how we're thinking about how it all should work. [1] https://drafts.csswg.org/css-animations-2/#animation-trigger-exit-range-start [2] w3c/csswg-drafts#11932 Bug: 390314945 Change-Id: I3a76401e0bf40bebe2960b96d11ba96bb010e705 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6426886 Reviewed-by: Anders Hartvoll Ruud <[email protected]> Commit-Queue: David Awogbemila <[email protected]> Cr-Commit-Position: refs/heads/main@{#1444687} -- wpt-commits: c4a6052734703e2e17d99722e6486475d443c18f wpt-pr: 51916
In the web animations spec,
animation-trigger-range-start,animation-trigger-range-end,animation-trigger-exit-range-startandanimation-trigger-exit-range-endspecify 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, e.g. “contain 10%”, “cover 100%”, etc.How should these properties be resolved when not specified?
Some options we can consider are:
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.
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 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.
The text was updated successfully, but these errors were encountered: