-
Notifications
You must be signed in to change notification settings - Fork 642
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[css-animations-2] Specify the animation-trigger property #10128
base: main
Are you sure you want to change the base?
Changes from 7 commits
133f6e0
f3a49ba
cbd4f07
9f6464a
912426a
9ae1a13
f1d2e89
e55e476
a0e90fe
361f5d9
efa38c7
085618e
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -68,6 +68,9 @@ spec:web-animations-1; type:dfn; | |
text:start delay | ||
text:target element | ||
text:unresolved | ||
spec:web-animations-2; type:dfn; | ||
text:default range | ||
text:exit range | ||
</pre> | ||
|
||
<h2 id="delta">Delta specification</h2> | ||
|
@@ -690,7 +693,173 @@ The 'animation' shorthand property syntax is as follows: | |
|
||
<span class=prod><dfn><single-animation></dfn> = <<'animation-duration'>> || <<easing-function>> || <<'animation-delay'>> || <<single-animation-iteration-count>> || <<single-animation-direction>> || <<single-animation-fill-mode>> || <<single-animation-play-state>> || [ none | <<keyframes-name>> ] || <<single-animation-timeline>></span> | ||
|
||
<h2 id="animation-triggers"> | ||
Declaring Animation Triggers</h2> | ||
|
||
Animation Triggers are defined using the 'animation-trigger-*' properties. | ||
These list-valued properties, | ||
which are all [=longhands=] of the 'animation-trigger' [=shorthand=], | ||
form a [=coordinating list property group=] | ||
with 'animation-name' as the [=coordinating list base property=] | ||
and each item in the [=coordinated value list=] | ||
defining the properties of a single animation trigger. | ||
|
||
## The 'animation-trigger-type' property ## {#animation-trigger-type} | ||
|
||
The 'animation-trigger-type' property specifies the [=animation trigger type=] | ||
of the [=animation trigger=]. | ||
|
||
<pre class='propdef'> | ||
Name: animation-trigger-type | ||
Value: <<single-animation-trigger-type>># | ||
Initial: once | ||
Applies to: all elements | ||
Inherited: no | ||
Percentages: N/A | ||
Computed value: list, each item a keyword as specified | ||
Animation type: not animatable | ||
Canonical order: per grammar | ||
</pre> | ||
|
||
<span class=prod><dfn><single-animation-trigger-type></dfn> = once | repeat | alternate | state</span> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can you add a description of what each property value means. Also we probably need a none value on this property to represent the default case right? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I was pondering all the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The definition of the values is done here. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Yeah, I like having the default values basically explain the triggering behavior we get today and adding the ability to modify it. It makes it feel like less of an added on property and more just part of the standard animation infrastructure.
I think this can be part of the general review when it's all written up. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Done |
||
|
||
## The 'animation-trigger-timeline' property ## {#animation-trigger-timeline} | ||
|
||
The 'animation-trigger-timeline' property specifies the <a>timeline</a> | ||
of the animation’s associated [=animation trigger=]. | ||
|
||
<pre class='propdef'> | ||
Name: animation-trigger-timeline | ||
Value: <<single-animation-timeline>># | ||
Initial: auto | ||
Applies to: all elements | ||
Inherited: no | ||
Percentages: N/A | ||
Computed value: list, each item either | ||
the keyword ''single-animation-timeline/none'', | ||
the keyword ''single-animation-timeline/auto'', | ||
a case-sensitive [=css identifier=], | ||
a computed ''scroll()'' function, | ||
or | ||
a computed ''view()'' function | ||
Canonical order: per grammar | ||
Animation Type: not animatable | ||
</pre> | ||
|
||
Issue: Probably a trigger with timeline "none" is under-specified here. Need to clarify what it means. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I wonder if the default timeline is the document timeline set up in a way such that the "trigger" is always active explaining the normal behavior of animations? You could imagine then using this as a way to coordinate starting an animation after some length of time, e.g. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Well, I remember we considered this in a previous issue specifically on syncing animations, but we said there that this will be the stuff that will eventually be done via GroupEffects. That said, if you see some way of changing the definition here and keeping this more open for later extensions I'm all for it. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
I feel like we'll still the pseudo-selector you suggested in #8175, for example, to defer until DOM and assets are loaded. This is pretty common. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think we should remove the none state, I'm not sure what it even means and the initial value is auto so it's not clear what you'd use none for. With the initial value auto, as you've said it has the same meaning as values of animation-timeline and as such would map to the document timeline. I think we should try to go with this model as it explains the existing behavior. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. OK, but |
||
|
||
## The 'animation-trigger-range' property ## {#animation-trigger-range} | ||
|
||
The 'animation-trigger-range' property is a [=shorthand property|shorthand=] | ||
that sets 'animation-trigger-range-start' and 'animation-trigger-range-end' | ||
together in a single declaration, | ||
specifying the [=animation trigger=]’s associated [=default range=]. | ||
|
||
<pre class="propdef shorthand"> | ||
Name: animation-trigger-range | ||
Value: [ <<'animation-range-start'>> <<'animation-range-end'>>? ]# | ||
</pre> | ||
|
||
## The 'animation-trigger-range-start' property ## {#animation-trigger-range-start} | ||
|
||
<pre class="propdef"> | ||
Name: animation-trigger-range-start | ||
Value: [ normal | <<length-percentage>> | <<timeline-range-name>> <<length-percentage>>? ]# | ||
Initial: normal | ||
Applies to: all elements | ||
Inherited: no | ||
Percentages: relative to the specified [=named timeline range=] if one was specified, else to the entire timeline | ||
Computed value: list, each item either the keyword ''animation-trigger-range-start/normal'' or a timeline range and progress percentage | ||
Animation type: not animatable | ||
</pre> | ||
|
||
The 'animation-trigger-range-start' property specifies the start of the [=animation trigger=]’s | ||
associated [=default range=]. | ||
|
||
## The 'animation-trigger-range-end' property ## {#animation-trigger-range-end} | ||
|
||
<pre class="propdef"> | ||
Name: animation-trigger-range-end | ||
Value: [ normal | <<length-percentage>> | <<timeline-range-name>> <<length-percentage>>? ]# | ||
Initial: normal | ||
Applies to: all elements | ||
Inherited: no | ||
Percentages: relative to the specified [=named timeline range=] if one was specified, else to the entire timeline | ||
Computed value: list, each item either the keyword ''animation-trigger-range-end/normal'' or a timeline range and progress percentage | ||
Animation type: not animatable | ||
</pre> | ||
|
||
The 'animation-trigger-range-end' property specifies the end of the [=animation trigger=]’s | ||
associated [=default range=]. | ||
|
||
## The 'animation-trigger-exit-range' property ## {#animation-trigger-exit-range} | ||
|
||
<pre class="propdef shorthand"> | ||
Name: animation-trigger-exit-range | ||
Value: [ <<'animation-trigger-exit-range-start'>> <<'animation-trigger-exit-range-end'>>? ]# | ||
</pre> | ||
|
||
The 'animation-trigger-exit-range' property is a [=shorthand property|shorthand=] | ||
that sets 'animation-trigger-exit-range-start' and 'animation-trigger-exit-range-end' | ||
together in a single declaration, | ||
specifying the [=animation trigger=]’s associated [=exit range=]. | ||
|
||
## The 'animation-trigger-exit-range-start' property ## {#animation-trigger-exit-range-start} | ||
|
||
<pre class="propdef"> | ||
Name: animation-trigger-exit-range-start | ||
Value: [ normal | <<length-percentage>> | <<timeline-range-name>> <<length-percentage>>? ]# | ||
Initial: normal | ||
Applies to: all elements | ||
Inherited: no | ||
Percentages: relative to the specified [=named timeline range=] if one was specified, else to the entire timeline | ||
Computed value: list, each item either the keyword ''animation-trigger-exit-range-start/normal'' or a timeline range and progress percentage | ||
Animation type: not animatable | ||
</pre> | ||
|
||
The 'animation-trigger-exit-range-start' property specifies the start of the [=animation trigger=]’s | ||
associated [=exit range=]. | ||
|
||
## The 'animation-trigger-exit-range-end' property ## {#animation-trigger-exit-range-end} | ||
|
||
<pre class="propdef"> | ||
Name: animation-trigger-exit-range-end | ||
Value: [ normal | <<length-percentage>> | <<timeline-range-name>> <<length-percentage>>? ]# | ||
Initial: normal | ||
Applies to: all elements | ||
Inherited: no | ||
Percentages: relative to the specified [=named timeline range=] if one was specified, else to the entire timeline | ||
Computed value: list, each item either the keyword ''animation-trigger-exit-range-end/normal'' or a timeline range and progress percentage | ||
Animation type: not animatable | ||
</pre> | ||
|
||
The 'animation-trigger-exit-range-end' property specifies the end of the [=animation trigger=]’s | ||
associated [=exit range=]. | ||
|
||
## The 'animation-trigger' property ## {#animation-trigger} | ||
ydaniv marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
The 'animation-trigger' property is a [=shorthand property|shorthand=] | ||
that sets 'animation-trigger-type', 'animation-trigger-timeline', | ||
'animation-trigger-range-start', 'animation-trigger-range-end', | ||
'animation-trigger-exit-range-start', and 'animation-trigger-exit-range-end' | ||
together in a single declaration, | ||
specifying the [=animation trigger=] for an animation. | ||
|
||
<pre class='propdef'> | ||
Name: animation-trigger | ||
Value: <<single-animation-trigger>># | ||
Initial: see individual properties | ||
Applies to: all elements | ||
Inherited: no | ||
Percentages: N/A | ||
Computed value: see individual properties | ||
Canonical order: per grammar | ||
Animation Type: not animatable | ||
</pre> | ||
|
||
<pre class=prod> | ||
<dfn><single-animation-trigger></dfn> = <<single-animation-trigger-type>> || [ none | auto | [ [ <<dashed-ident>> | <<scroll()>> | <<view()>> ] [ normal | <<length-percentage>> | <<timeline-range-name>> <<length-percentage>>? ]{0,4} ] ] | ||
</pre> | ||
|
||
# Animation Events # {#events} | ||
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -772,6 +772,9 @@ Animation Frames {#animation-frame-loop} | |
* Updating the [=animation/current time=] of any [=animations=] | ||
[=associated with a timeline|associated with=] the timeline. | ||
|
||
* Updating the [=animation trigger state=] of any [=animation trigger=] | ||
[=associated with a timeline|associated with=] the timeline. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This can move to web-animations-2 right? Also I think this needs to happen before updating the times of animations so that we can set their start time and know to make their effects active if they've been triggered. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Well the Regarding order, yes, I'll pull it up to happen before updating animations. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yeah, we'd add a delta for this section to the ewb-animations-2 spec. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. done |
||
|
||
* Running the [=update an animation's finished state=] procedure | ||
for any animations whose [=animation/current time=] has been updated. | ||
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -85,7 +85,7 @@ Abstract: This specification defines a model for synchronization and | |
specifications will define declarative means for exposing these | ||
features. | ||
Ignored Vars: auto-rewind, current direction, index, initial progress, | ||
timeline, new timeline, t, going forwards | ||
timeline, new timeline, t, going forwards, did trigger | ||
</pre> | ||
<pre class="anchors"> | ||
urlPrefix: https://drafts.csswg.org/web-animations-1/; type: dfn; spec: web-animations-1 | ||
|
@@ -122,6 +122,7 @@ urlPrefix: https://drafts.csswg.org/web-animations-1/; type: dfn; spec: web-anim | |
text: play an animation | ||
text: playback direction | ||
text: pause an animation | ||
text: reverse an animation | ||
text: ready | ||
text: set the timeline of an animation | ||
text: simple iteration progress | ||
|
@@ -2353,6 +2354,142 @@ Items sorted earlier are executed before those sorted later. | |
|
||
</ins> | ||
|
||
Animation Triggers {#triggers} | ||
----------------- | ||
|
||
### Overview ### {#triggers-overview} | ||
|
||
An <dfn export>animation trigger</dfn> is used to control the playback | ||
of its associated [=animation=] for time-driven animations. | ||
Like animations, [=animation triggers=] are associated with a [=timeline=] | ||
and are attached to an [=animation attachment range|attachment range=]. | ||
|
||
Issue: Should there be any effect of triggers on scroll-driven animations? | ||
|
||
### Animation Trigger State ### {#trigger-state} | ||
|
||
An [=animation trigger=] |trigger| with [=animation trigger type=] |type| | ||
and an associated [=animation=] |animation| | ||
has an internal <dfn export lt="animation trigger state">state</dfn> that can be one of the following: | ||
|
||
<dl dfn-for="animation trigger state" dfn-type=value> | ||
<dt><dfn>idle</dfn> | ||
<dd> | ||
The [=animation effect=] associated |animation| remains in | ||
its [=animation effect/before phase=] and stays at zero [=animation/start time=]. | ||
|
||
<dt><dfn>primary</dfn> | ||
<dd> | ||
The ''primary'' effect defined by |type| is applied to |animation|. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There's a bit of a mismatch between this and the text in css-animations-2 where the text for single-animation-trigger-type specifies when the effect is applied. The text above implies that the effect is applied continually while in the state, but the text in single-animation-trigger-type implies that the effect is applied at a discrete moment in time. If all of the effects are discrete then I think it would be simpler to have the effect explicitly only invoked when the trigger's state changes. |
||
|
||
<dt><dfn>inverse</dfn> | ||
<dd> | ||
The ''inverse'' effect defined by |type| is applied to |animation|. | ||
|
||
</dl> | ||
|
||
Issue: Do we need a formal resolution on the spec of the idle state? | ||
|
||
The [=animation trigger state=] |state| of an [=animation trigger=] |trigger| | ||
is controlled by the [=animation attachment range|attachment range=] it is attached to, | ||
given a flag |did trigger|, as follows: | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think you need to say something about how when the current time of the trigger timeline is changed, we run the following steps. We also need to say how did trigger is stored, it's probably state associated with the animation trigger? E.g. if i assign a new trigger to an animation i probably want to reset the animation trigger. |
||
|
||
<dl class=switch> | ||
: If |trigger|’s [=local time=] is [=unresolved=], | ||
:: | ||
Then |state| is ''animation trigger state/idle'', and |did trigger| is set to false. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Wouldn't setting Note, it doesn't look like these links, e.g. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Interesting! I'm not sure whether this is unexpected. I guess we should open another issue for that. Regarding the links, I'll check and fix. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Gave this another thought. I think this should be expected, but definitely worth opening an issue and discuss this explicitly.
Right, appears as though these aren't linked correctly, but I used the suggested syntax, so not sure what to do. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. On re-reading this, I realized the
Which implies that once animations are not retriggered by this, which I think addresses my primary concern. I was thinking about whether resizing the scroller / browser such that the area is no longer scrollable should be treated differently than exiting the exit range? My thinking is it shouldn't be any different. You by definition can't be in the exit range. With this in mind I'm not exactly sure what did trigger is trying to accomplish other than perhaps giving different behavior to being outside the active range to start, and going inactive. If this is the case, I think we should just consider the previous state rather than introduce this did trigger variable. E.g. if you're outside the active range and you have no previous state or your previous state was idle, you're still idle. |
||
|
||
: Otherwise, | ||
:: | ||
|
||
<dl class=switch> | ||
: If |trigger| is inside its [=active interval=], | ||
:: | ||
Then |state| is ''animation trigger state/primary'', and |did trigger| is set to true. | ||
|
||
: Otherwise, | ||
:: | ||
|
||
<dl class=switch> | ||
: If |did trigger| flag is false, | ||
:: | ||
Then |state| is ''animation trigger state/idle''. | ||
|
||
: Otherwise, | ||
:: | ||
|state| is ''animation trigger state/inverse''. | ||
|
||
</dl> | ||
|
||
</dl> | ||
|
||
</dl> | ||
|
||
### Animation Trigger Types ### {#trigger-types} | ||
|
||
The behavior an [=animation trigger=] applies to its associated [=animation=]’s | ||
playback is defined by its <dfn export>animation trigger type</dfn>, | ||
which can be one of the following: | ||
|
||
<dl dfn-type=value dfn-for='animation trigger type'> | ||
<dt><dfn>once</dfn> | ||
<dd> | ||
The ''primary'' behavior is [=play an animation|triggering=] the associated animation. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think this needs to define how the behavior is only applied once. E.g. the suggested triggered state associated with an animation, initially false |
||
|
||
<dt><dfn>repeat</dfn> | ||
<dd> | ||
The ''primary'' behavior is [=play an animation|triggering=] the associated animation. | ||
The ''inverse'' behavior is resetting the [=animation trigger state=] back to ''animation trigger state/idle''. | ||
|
||
<dt><dfn>alternate</dfn> | ||
<dd> | ||
<dl class=switch> | ||
: if the |did trigger| flag is false, | ||
:: | ||
The ''primary'' behavior is [=play an animation|triggering=] the associated animation. | ||
|
||
: Otherwise, | ||
:: | ||
The ''primary'' behavior is [=reverse an animation|reversing=] the associated animation. | ||
|
||
</dl> | ||
|
||
The ''inverse'' behavior is [=reverse an animation|reversing=] the associated animation. | ||
|
||
<dt><dfn>state</dfn> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I wonder if something like play-pause would be clearer. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. That's another option. The idea behind There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Right, I could see play-state as an alternative. State feels too strange, I didn't have any idea what this meant until I read the description :-). |
||
<dd> | ||
The ''primary'' behavior is [=play an animation|triggering or resuming=] the associated animation. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think it would be more consistent if state only changes the animation play state, i.e. the animation would be started in a paused state until the active trigger range is entered. |
||
The ''inverse'' behavior is [=pause an animation|pausing=] the associated animation. | ||
</dl> | ||
|
||
Issue: Need to bike-shed the name for type "state" type. | ||
|
||
### Animation Trigger Ranges ### {#trigger-ranges} | ||
|
||
An [=animation trigger=] has at least one [=animation attachment range|range=], | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think we should define a new term for the trigger interval's active range, as the combination of the two ranges would probably be worth eventually having a diagram to illustrate. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Sounds good, I'll try adding that. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. done |
||
its <dfn>default range</dfn>, which defines its [=active interval=]. | ||
This range defines when the [=animation trigger|trigger=] is in its ''animation trigger state/primary'' state, | ||
as specified in [[#trigger-state]]. | ||
|
||
An [=animation trigger=] may also have a second [=animation attachment range|range=], | ||
the <dfn>exit range</dfn>. The [=exit range=] is used to replace [=default range=] and extend | ||
the [=active interval=] of an [=animation trigger=] |trigger| as follows: | ||
|
||
<dl class=switch> | ||
: If |trigger| is inside its [=active interval=], | ||
:: | ||
It’s attached to its [=exit range=]. | ||
|
||
: Otherwise, | ||
:: | ||
It’s attached to its [=default range=]. | ||
|
||
</dl> | ||
|
||
Issue: Should we specify that that exit range’s edges can only be equal to or greater than the default range’s edges? | ||
|
||
Issue: Do we need to specify the process for determining the effective attachment range in the HTML Processing Model? | ||
|
||
<!-- End of animation model --> | ||
|
||
<h2 id="programming-interface">Programming interface</h2> | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If this spec doesn't explain how they work but only mentions the relevant properties, it should point to the section in the web-animations-2 spec which explains what animation triggers are and how they work. E.g. this could be as simple as having "animation triggers" link to the section in web animations, similar to how the animation composition property points to the web-animations definition of what a composite operation is.
That said, it's not uncommon to have a plain English explanation for what it means with the details and algorithms left to web-animations. E.g. to take a random property the definition of animation-fill-mode explains what it does without going into the specific algorithmic details that are in the web-animations spec.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I like both. I guess I'll refactor the text a bit and add a link.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done