From 133f6e095cc53274252a2086e65a0c963adcc678 Mon Sep 17 00:00:00 2001 From: Yehonatan Daniv Date: Mon, 25 Mar 2024 10:45:58 +0200 Subject: [PATCH 01/13] [css-animations-2] Specify the animation-trigger property --- css-animations-2/Overview.bs | 282 ++++++++++++++++++++++++++++++++++- 1 file changed, 281 insertions(+), 1 deletion(-) diff --git a/css-animations-2/Overview.bs b/css-animations-2/Overview.bs index 5e3d2f30516..dff8bee2878 100644 --- a/css-animations-2/Overview.bs +++ b/css-animations-2/Overview.bs @@ -30,7 +30,7 @@ Editor: Brian Birtles, Invited Expert, brian@birchill.co.jp, w3cid 43194 Abstract: This CSS module describes a way for authors to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, number of repeats, and repeating behavior. -Ignored Vars: auto-rewind +Ignored Vars: auto-rewind, did trigger 
 urlPrefix: https://dom.spec.whatwg.org/; type: dfn; spec: dom
@@ -690,7 +690,30 @@ The 'animation' shorthand property syntax is as follows:
 
 <single-animation> = <<'animation-duration'>> || <> || <<'animation-delay'>> || <> || <> || <> || <> || [ none | <> ] || <>
 
+## The 'animation-trigger' property ## {#animation-trigger}
 
+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.
+
+
+Name: animation-trigger
+Value: <>#
+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
+

+
+
+<single-animation-trigger> = <> || <> || <> || <> || <> || <>
+

 
 # Animation Events # {#events}
 
@@ -847,6 +870,263 @@ expressed in milliseconds, it must be divided by 1,000 to produce a value in
 seconds before being assigned to the {{AnimationEvent/elapsedTime}} member of
 the {{AnimationEvent}}.
 
+# Animation Triggers # {#triggers}
+
+An animation trigger is used to control the playback
+of its associated [=animation=] for time-driven animations.
+[=Animation triggers=] follow the same [=hierarchical|hierarchy=]
+as animations and are associated with a [=timeline=] and an [=animation trigger effect|effect=].
+
+Issue: Should there be any effect of triggers on scroll-driven animations?
+
+##  Animation Trigger Effects ## {#trigger-effects}
+
+The animation trigger effect applies an effect
+to an [=animation=]’s playback via a mutually associated
+[=animation trigger=]. This effect is defined by its [=animation trigger type|type=].
+
+An [=animation trigger effect=] of [=animation trigger=] |trigger|
+with [=animation trigger type=] |type| has an internal
+state that
+can be one of the following:
+
+

+  
idle
+  

+    The [=animation effect=] associated with |trigger| remains in
+    its [=animation phase/before=] phase and stays at zero [=animation/start time=].
+
+  
primary
+  

+    The ''primary'' effect defined by |type| is applied to its associated [=animation=].
+
+  
inverse
+  

+    The ''inverse'' effect defined by the |type| is applied to its associated [=animation=].
+
+

+
+Issue: Do we need a formal resolution on the spec of the idle state?
+
+An [=animation trigger effect=] |effect| is controlled
+by the [=attachment range=] it is attached to as follows:
+
+

+  : If |effect|’s [=local time=] is [=unresolved=],
+  ::
+    It is in its [=animation trigger effect state/idle=] state, and its |did trigger| flag is set to false.
+
+  : Otherwise,
+  ::
+
+    

+      : If |effect| is inside its [=active interval=],
+      ::
+        It is in its [=animation trigger effect state/primary=] state, and its |did trigger| flag is set to true.
+
+      : Otherwise,
+      ::
+
+        

+          : If |effect|’s |did trigger| flag is false,
+          ::
+            It is in its [=animation trigger effect state/idle=] state.
+
+          : Otherwise,
+          ::
+            It is in its [=animation trigger effect state/inverse=] state.
+
+        

+
+    

+
+

+
+## Animation Trigger Ranges ## {#trigger-ranges}
+
+An [=animation trigger=] has at least one [=attachment range|range=],
+its default range, which defines the [=active interval=] of
+the [=animation trigger effect|effect=]. This range defines when
+the [=animation trigger effect|effect=] is in its [=animation trigger effect state/primary=] state,
+as specified in [[#trigger-effects]].
+
+An [=animation trigger=] may also have a second [=attachment range|range=],
+the exit range. The [=exit range=] is used to replace [=default range=] and extend
+the [=active interval=] of an [=animation trigger effect|effect=] |effect| as follows:
+
+

+  : If |effect| is inside its [=active interval=],
+  ::
+    It’s attached to its [=exit range=].
+
+  : Otherwise,
+  ::
+    It’s attached to its [=default range=].
+
+

+
+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?
+
+## The 'animation-trigger-type' property ## {#animation-trigger-type}
+
+The 'animation-trigger-type' property specifies the [=animation trigger type=]
+of the [=animation trigger=]’s associated [=animation trigger effect|effect=].
+
+
+Name: animation-trigger-type
+Value: <>#
+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
+

+
+<single-animation-trigger-type> = once | repeat | alternate | state
+
+

+  
once
+  

+    The ''primary'' effect is [=play an animation|triggering=] the associated animation.
+
+  
repeat
+  

+    The ''primary'' effect is [=play an animation|triggering=] the associated animation.
+    The ''inverse'' effect is resetting the [=animation trigger=]’s state back to [=animation trigger state/idle=].
+
+  
alternate
+  

+    If the [=animation trigger=] is in its [=animation trigger state/idle=] state
+    then its [=pending playback rate=] is the additive inverse
+    of its associated animation’s [=playback rate=].
+    Both the ''primary'' and the ''inverse'' effects
+    are [=reverse an animation|reversing=] the associated animation.
+
+  
state
+  

+    The ''primary'' effect is [=play an animation|triggering or resuming=] the associated animation.
+    The ''inverse'' effect is [=pause an animation|pausing=] the associated animation.
+

+
+Issue: Need to bike-shed the name for type "state" type.
+
+## The 'animation-trigger-timeline' property ## {#animation-trigger-timeline}
+
+The 'animation-trigger-timeline' property specifies the [=animation trigger/timeline=]
+of the animation’s associated [=animation trigger=].
+
+
+Name: animation-trigger-timeline
+Value: <>#
+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
+

+
+Issue: Probably a trigger with timeline "none" is under-specified here. Need to clarify what it means.
+
+## 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=].
+
+
+  Name: animation-trigger-range
+  Value: [ <<'animation-range-start'>> <<'animation-range-end'>>? ]#
+

+
+## The 'animation-trigger-range-start' property ## {#animation-trigger-range-start}
+
+
+  Name: animation-trigger-range-start
+  Value: [ normal | <> | <> <>? ]#
+  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
+

+
+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}
+
+
+  Name: animation-trigger-range-end
+  Value: [ normal | <> | <> <>? ]#
+  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
+

+
+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}
+
+
+  Name: animation-trigger-exit-range
+  Value: [ <<'animation-trigger-exit-range-start'>> <<'animation-trigger-exit-range-end'>>? ]#
+

+
+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}
+
+
+  Name: animation-trigger-exit-range-start
+  Value: [ normal | <> | <> <>? ]#
+  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
+

+
+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}
+
+
+  Name: animation-trigger-exit-range-end
+  Value: [ normal | <> | <> <>? ]#
+  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
+

+
+The 'animation-trigger-exit-range-end' property specifies the end of the [=animation trigger=]’s
+associated [=exit range=].
+
 # DOM Interfaces # {#interface-dom}
 
 ## The CSSAnimation interface ## {#the-CSSAnimation-interface}

From f3a49ba908b1fd6cf320639ed16cc49498e32e41 Mon Sep 17 00:00:00 2001
From: Yehonatan Daniv 
Date: Tue, 26 Mar 2024 00:23:16 +0200
Subject: [PATCH 02/13] Fixed syntax of single-animation-trigger + some link
 fixes

---
 css-animations-2/Overview.bs | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/css-animations-2/Overview.bs b/css-animations-2/Overview.bs
index dff8bee2878..208563567b8 100644
--- a/css-animations-2/Overview.bs
+++ b/css-animations-2/Overview.bs
@@ -712,7 +712,7 @@ Animation Type: not animatable
 
-<single-animation-trigger> = <> || <> || <> || <> || <> || <>
+<single-animation-trigger> = <> || [ none | auto | [ [ <> | <> | <> ] [ normal | <> | <> <>? ]{0,4} ] ]
# Animation Events # {#events} @@ -874,7 +874,7 @@ the {{AnimationEvent}}. An animation trigger is used to control the playback of its associated [=animation=] for time-driven animations. -[=Animation triggers=] follow the same [=hierarchical|hierarchy=] +[=Animation triggers=] follow the same hierarchy as animations and are associated with a [=timeline=] and an [=animation trigger effect|effect=]. Issue: Should there be any effect of triggers on scroll-driven animations? @@ -887,7 +887,7 @@ to an [=animation=]’s playback via a mutually associated An [=animation trigger effect=] of [=animation trigger=] |trigger| with [=animation trigger type=] |type| has an internal -state that +state that can be one of the following:
@@ -914,7 +914,7 @@ by the [=attachment range=] it is attached to as follows:
: If |effect|’s [=local time=] is [=unresolved=], :: - It is in its [=animation trigger effect state/idle=] state, and its |did trigger| flag is set to false. + It is in its ''animation-trigger-effect-state/idle'' state, and its |did trigger| flag is set to false. : Otherwise, :: @@ -922,7 +922,7 @@ by the [=attachment range=] it is attached to as follows:
: If |effect| is inside its [=active interval=], :: - It is in its [=animation trigger effect state/primary=] state, and its |did trigger| flag is set to true. + It is in its ''animation-trigger-effect-state/primary'' state, and its |did trigger| flag is set to true. : Otherwise, :: @@ -930,11 +930,11 @@ by the [=attachment range=] it is attached to as follows:
: If |effect|’s |did trigger| flag is false, :: - It is in its [=animation trigger effect state/idle=] state. + It is in its ''animation-trigger-effect-state/idle'' state. : Otherwise, :: - It is in its [=animation trigger effect state/inverse=] state. + It is in its ''animation-trigger-effect-state/inverse'' state.
@@ -947,7 +947,7 @@ by the [=attachment range=] it is attached to as follows: An [=animation trigger=] has at least one [=attachment range|range=], its default range, which defines the [=active interval=] of the [=animation trigger effect|effect=]. This range defines when -the [=animation trigger effect|effect=] is in its [=animation trigger effect state/primary=] state, +the [=animation trigger effect|effect=] is in its ''animation-trigger-effect-state/primary'' state, as specified in [[#trigger-effects]]. An [=animation trigger=] may also have a second [=attachment range|range=], From cbd4f0799fe87730a62e59f0557dc73df30b83b9 Mon Sep 17 00:00:00 2001 From: Yehonatan Daniv Date: Wed, 27 Mar 2024 19:01:35 +0200 Subject: [PATCH 03/13] More fixes to links and defs --- css-animations-2/Overview.bs | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/css-animations-2/Overview.bs b/css-animations-2/Overview.bs index 208563567b8..678d5f82f40 100644 --- a/css-animations-2/Overview.bs +++ b/css-animations-2/Overview.bs @@ -874,7 +874,7 @@ the {{AnimationEvent}}. An animation trigger is used to control the playback of its associated [=animation=] for time-driven animations. -[=Animation triggers=] follow the same hierarchy +[=Animation triggers=] follow the same [[web-animations-1#hierarchical|hierarchy]] as animations and are associated with a [=timeline=] and an [=animation trigger effect|effect=]. Issue: Should there be any effect of triggers on scroll-driven animations? @@ -894,7 +894,7 @@ can be one of the following:
idle
The [=animation effect=] associated with |trigger| remains in - its [=animation phase/before=] phase and stays at zero [=animation/start time=]. + its [=animation effect/before phase=] and stays at zero [=animation/start time=].
primary
@@ -909,7 +909,7 @@ can be one of the following: Issue: Do we need a formal resolution on the spec of the idle state? An [=animation trigger effect=] |effect| is controlled -by the [=attachment range=] it is attached to as follows: +by the [=animation attachment range|attachment range=] it is attached to as follows:
: If |effect|’s [=local time=] is [=unresolved=], @@ -944,13 +944,13 @@ by the [=attachment range=] it is attached to as follows: ## Animation Trigger Ranges ## {#trigger-ranges} -An [=animation trigger=] has at least one [=attachment range|range=], +An [=animation trigger=] has at least one [=animation attachment range|range=], its default range, which defines the [=active interval=] of the [=animation trigger effect|effect=]. This range defines when the [=animation trigger effect|effect=] is in its ''animation-trigger-effect-state/primary'' state, as specified in [[#trigger-effects]]. -An [=animation trigger=] may also have a second [=attachment range|range=], +An [=animation trigger=] may also have a second [=animation attachment range|range=], the exit range. The [=exit range=] is used to replace [=default range=] and extend the [=active interval=] of an [=animation trigger effect|effect=] |effect| as follows: @@ -971,7 +971,7 @@ Issue: Do we need to specify the process for determining the effective attachmen ## The 'animation-trigger-type' property ## {#animation-trigger-type} -The 'animation-trigger-type' property specifies the [=animation trigger type=] +The 'animation-trigger-type' property specifies the animation trigger type of the [=animation trigger=]’s associated [=animation trigger effect|effect=]. 
@@ -988,7 +988,7 @@ Canonical order: per grammar
 
 <single-animation-trigger-type> = once | repeat | alternate | state
 
-

+

   
once
   

     The ''primary'' effect is [=play an animation|triggering=] the associated animation.
@@ -996,15 +996,15 @@ Canonical order: per grammar
   
repeat
   

     The ''primary'' effect is [=play an animation|triggering=] the associated animation.
-    The ''inverse'' effect is resetting the [=animation trigger=]’s state back to [=animation trigger state/idle=].
+    The ''inverse'' effect is resetting the [=animation trigger effect=]’s state back to ''animation-trigger-effect-state/idle''.
 
   
alternate
   

-    If the [=animation trigger=] is in its [=animation trigger state/idle=] state
+    If the [=animation trigger effect=] is in its ''animation-trigger-effect-state/idle'' state
     then its [=pending playback rate=] is the additive inverse
     of its associated animation’s [=playback rate=].
     Both the ''primary'' and the ''inverse'' effects
-    are [=reverse an animation|reversing=] the associated animation.
+    are [[web-animations-1#reversing-an-animation-section|reversing]] the associated animation.
 
   
state
   


From 9f6464aa76c9b28c031f2de2852f084bb25ebe05 Mon Sep 17 00:00:00 2001
From: Yehonatan Daniv 
Date: Thu, 28 Mar 2024 13:56:26 +0200
Subject: [PATCH 04/13] More fixes to links and defs

---
 css-animations-2/Overview.bs | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/css-animations-2/Overview.bs b/css-animations-2/Overview.bs
index 678d5f82f40..f9d3ced55d5 100644
--- a/css-animations-2/Overview.bs
+++ b/css-animations-2/Overview.bs
@@ -41,6 +41,7 @@ spec:web-animations-1; type:dfn;
     text:active duration
     text:active phase; for:animation effect
     text:active time
+    text:active interval
     text:after phase; for:animation effect
     text:animation class
     text:animation effect
@@ -58,7 +59,9 @@ spec:web-animations-1; type:dfn;
     text:iteration count
     text:iteration start
     text:keyframe
+    text:play an animation
     text:pause an animation
+    text:reverse an animation
     text:paused play state
     text:pending pause task
     text:pending play task
@@ -909,7 +912,8 @@ can be one of the following:
 Issue: Do we need a formal resolution on the spec of the idle state?
 
 An [=animation trigger effect=] |effect| is controlled
-by the [=animation attachment range|attachment range=] it is attached to as follows:
+by the [=animation attachment range|attachment range=] it is attached to,
+given a flag |did trigger|, as follows:
 
 

   : If |effect|’s [=local time=] is [=unresolved=],
@@ -1000,11 +1004,18 @@ Canonical order: per grammar
 
   
alternate
   

-    If the [=animation trigger effect=] is in its ''animation-trigger-effect-state/idle'' state
-    then its [=pending playback rate=] is the additive inverse
-    of its associated animation’s [=playback rate=].
-    Both the ''primary'' and the ''inverse'' effects
-    are [[web-animations-1#reversing-an-animation-section|reversing]] the associated animation.
+    

+      : if the |did trigger| flag is false,
+      ::
+        The ''primary'' effect is [=play an animation|triggering=] the associated animation.
+
+      : Otherwise,
+      ::
+        The ''primary'' effect is [=reverse an animation|reversing=] the associated animation.
+
+    

+
+    The ''inverse'' effect is [=reverse an animation|reversing=] the associated animation.
 
   
state
   

@@ -1016,7 +1027,7 @@ Issue: Need to bike-shed the name for type "state" type.
 
 ## The 'animation-trigger-timeline' property ## {#animation-trigger-timeline}
 
-The 'animation-trigger-timeline' property specifies the [=animation trigger/timeline=]
+The 'animation-trigger-timeline' property specifies the timeline
 of the animation’s associated [=animation trigger=].
 
 

From 912426abeda0fa7dc7da42218b45193c32d29e58 Mon Sep 17 00:00:00 2001
From: Yehonatan Daniv 
Date: Wed, 17 Apr 2024 14:18:26 +0300
Subject: [PATCH 05/13] Move all definitions to web-animations-1; Removed dfn
 of animation trigger effect

---
 css-animations-2/Overview.bs | 415 ++++++++++++-----------------------
 web-animations-1/Overview.bs | 140 +++++++++++-
 2 files changed, 285 insertions(+), 270 deletions(-)

diff --git a/css-animations-2/Overview.bs b/css-animations-2/Overview.bs
index f9d3ced55d5..51c6d871170 100644
--- a/css-animations-2/Overview.bs
+++ b/css-animations-2/Overview.bs
@@ -30,7 +30,7 @@ Editor: Brian Birtles, Invited Expert, brian@birchill.co.jp, w3cid 43194
 
 
 Abstract: This CSS module describes a way for authors to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, number of repeats, and repeating behavior.
-Ignored Vars: auto-rewind, did trigger
+Ignored Vars: auto-rewind
 

 
 urlPrefix: https://dom.spec.whatwg.org/; type: dfn; spec: dom
@@ -41,7 +41,6 @@ spec:web-animations-1; type:dfn;
     text:active duration
     text:active phase; for:animation effect
     text:active time
-    text:active interval
     text:after phase; for:animation effect
     text:animation class
     text:animation effect
@@ -59,9 +58,7 @@ spec:web-animations-1; type:dfn;
     text:iteration count
     text:iteration start
     text:keyframe
-    text:play an animation
     text:pause an animation
-    text:reverse an animation
     text:paused play state
     text:pending pause task
     text:pending play task
@@ -71,6 +68,8 @@ spec:web-animations-1; type:dfn;
     text:start delay
     text:target element
     text:unresolved
+    text:default range
+    text:exit range
 

 
 
Delta specification

@@ -693,6 +692,149 @@ The 'animation' shorthand property syntax is as follows:
 
 <single-animation> = <<'animation-duration'>> || <> || <<'animation-delay'>> || <> || <> || <> || <> || [ none | <> ] || <>
 
+

+Declaring Animation Triggers

+
+    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=].
+
+
+Name: animation-trigger-type
+Value: <>#
+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
+

+
+<single-animation-trigger-type> = once | repeat | alternate | state
+
+## The 'animation-trigger-timeline' property ## {#animation-trigger-timeline}
+
+The 'animation-trigger-timeline' property specifies the timeline
+of the animation’s associated [=animation trigger=].
+
+
+Name: animation-trigger-timeline
+Value: <>#
+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
+

+
+Issue: Probably a trigger with timeline "none" is under-specified here. Need to clarify what it means.
+
+## 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=].
+
+
+  Name: animation-trigger-range
+  Value: [ <<'animation-range-start'>> <<'animation-range-end'>>? ]#
+

+
+## The 'animation-trigger-range-start' property ## {#animation-trigger-range-start}
+
+
+  Name: animation-trigger-range-start
+  Value: [ normal | <> | <> <>? ]#
+  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
+

+
+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}
+
+
+  Name: animation-trigger-range-end
+  Value: [ normal | <> | <> <>? ]#
+  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
+

+
+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}
+
+
+  Name: animation-trigger-exit-range
+  Value: [ <<'animation-trigger-exit-range-start'>> <<'animation-trigger-exit-range-end'>>? ]#
+

+
+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}
+
+
+  Name: animation-trigger-exit-range-start
+  Value: [ normal | <> | <> <>? ]#
+  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
+

+
+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}
+
+
+  Name: animation-trigger-exit-range-end
+  Value: [ normal | <> | <> <>? ]#
+  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
+

+
+The 'animation-trigger-exit-range-end' property specifies the end of the [=animation trigger=]’s
+associated [=exit range=].
+
 ## The 'animation-trigger' property ## {#animation-trigger}
 
 The 'animation-trigger' property is a [=shorthand property|shorthand=]
@@ -873,271 +1015,6 @@ expressed in milliseconds, it must be divided by 1,000 to produce a value in
 seconds before being assigned to the {{AnimationEvent/elapsedTime}} member of
 the {{AnimationEvent}}.
 
-# Animation Triggers # {#triggers}
-
-An animation trigger is used to control the playback
-of its associated [=animation=] for time-driven animations.
-[=Animation triggers=] follow the same [[web-animations-1#hierarchical|hierarchy]]
-as animations and are associated with a [=timeline=] and an [=animation trigger effect|effect=].
-
-Issue: Should there be any effect of triggers on scroll-driven animations?
-
-##  Animation Trigger Effects ## {#trigger-effects}
-
-The animation trigger effect applies an effect
-to an [=animation=]’s playback via a mutually associated
-[=animation trigger=]. This effect is defined by its [=animation trigger type|type=].
-
-An [=animation trigger effect=] of [=animation trigger=] |trigger|
-with [=animation trigger type=] |type| has an internal
-state that
-can be one of the following:
-
-

-  
idle
-  

-    The [=animation effect=] associated with |trigger| remains in
-    its [=animation effect/before phase=] and stays at zero [=animation/start time=].
-
-  
primary
-  

-    The ''primary'' effect defined by |type| is applied to its associated [=animation=].
-
-  
inverse
-  

-    The ''inverse'' effect defined by the |type| is applied to its associated [=animation=].
-
-

-
-Issue: Do we need a formal resolution on the spec of the idle state?
-
-An [=animation trigger effect=] |effect| is controlled
-by the [=animation attachment range|attachment range=] it is attached to,
-given a flag |did trigger|, as follows:
-
-

-  : If |effect|’s [=local time=] is [=unresolved=],
-  ::
-    It is in its ''animation-trigger-effect-state/idle'' state, and its |did trigger| flag is set to false.
-
-  : Otherwise,
-  ::
-
-    

-      : If |effect| is inside its [=active interval=],
-      ::
-        It is in its ''animation-trigger-effect-state/primary'' state, and its |did trigger| flag is set to true.
-
-      : Otherwise,
-      ::
-
-        

-          : If |effect|’s |did trigger| flag is false,
-          ::
-            It is in its ''animation-trigger-effect-state/idle'' state.
-
-          : Otherwise,
-          ::
-            It is in its ''animation-trigger-effect-state/inverse'' state.
-
-        

-
-    

-
-

-
-## Animation Trigger Ranges ## {#trigger-ranges}
-
-An [=animation trigger=] has at least one [=animation attachment range|range=],
-its default range, which defines the [=active interval=] of
-the [=animation trigger effect|effect=]. This range defines when
-the [=animation trigger effect|effect=] is in its ''animation-trigger-effect-state/primary'' state,
-as specified in [[#trigger-effects]].
-
-An [=animation trigger=] may also have a second [=animation attachment range|range=],
-the exit range. The [=exit range=] is used to replace [=default range=] and extend
-the [=active interval=] of an [=animation trigger effect|effect=] |effect| as follows:
-
-

-  : If |effect| is inside its [=active interval=],
-  ::
-    It’s attached to its [=exit range=].
-
-  : Otherwise,
-  ::
-    It’s attached to its [=default range=].
-
-

-
-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?
-
-## The 'animation-trigger-type' property ## {#animation-trigger-type}
-
-The 'animation-trigger-type' property specifies the animation trigger type
-of the [=animation trigger=]’s associated [=animation trigger effect|effect=].
-
-
-Name: animation-trigger-type
-Value: <>#
-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
-

-
-<single-animation-trigger-type> = once | repeat | alternate | state
-
-

-  
once
-  

-    The ''primary'' effect is [=play an animation|triggering=] the associated animation.
-
-  
repeat
-  

-    The ''primary'' effect is [=play an animation|triggering=] the associated animation.
-    The ''inverse'' effect is resetting the [=animation trigger effect=]’s state back to ''animation-trigger-effect-state/idle''.
-
-  
alternate
-  

-    

-      : if the |did trigger| flag is false,
-      ::
-        The ''primary'' effect is [=play an animation|triggering=] the associated animation.
-
-      : Otherwise,
-      ::
-        The ''primary'' effect is [=reverse an animation|reversing=] the associated animation.
-
-    

-
-    The ''inverse'' effect is [=reverse an animation|reversing=] the associated animation.
-
-  
state
-  

-    The ''primary'' effect is [=play an animation|triggering or resuming=] the associated animation.
-    The ''inverse'' effect is [=pause an animation|pausing=] the associated animation.
-

-
-Issue: Need to bike-shed the name for type "state" type.
-
-## The 'animation-trigger-timeline' property ## {#animation-trigger-timeline}
-
-The 'animation-trigger-timeline' property specifies the timeline
-of the animation’s associated [=animation trigger=].
-
-
-Name: animation-trigger-timeline
-Value: <>#
-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
-

-
-Issue: Probably a trigger with timeline "none" is under-specified here. Need to clarify what it means.
-
-## 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=].
-
-
-  Name: animation-trigger-range
-  Value: [ <<'animation-range-start'>> <<'animation-range-end'>>? ]#
-

-
-## The 'animation-trigger-range-start' property ## {#animation-trigger-range-start}
-
-
-  Name: animation-trigger-range-start
-  Value: [ normal | <> | <> <>? ]#
-  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
-

-
-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}
-
-
-  Name: animation-trigger-range-end
-  Value: [ normal | <> | <> <>? ]#
-  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
-

-
-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}
-
-
-  Name: animation-trigger-exit-range
-  Value: [ <<'animation-trigger-exit-range-start'>> <<'animation-trigger-exit-range-end'>>? ]#
-

-
-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}
-
-
-  Name: animation-trigger-exit-range-start
-  Value: [ normal | <> | <> <>? ]#
-  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
-

-
-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}
-
-
-  Name: animation-trigger-exit-range-end
-  Value: [ normal | <> | <> <>? ]#
-  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
-

-
-The 'animation-trigger-exit-range-end' property specifies the end of the [=animation trigger=]’s
-associated [=exit range=].
-
 # DOM Interfaces # {#interface-dom}
 
 ## The CSSAnimation interface ## {#the-CSSAnimation-interface}
diff --git a/web-animations-1/Overview.bs b/web-animations-1/Overview.bs
index 4573617ab42..b25648cbdd7 100644
--- a/web-animations-1/Overview.bs
+++ b/web-animations-1/Overview.bs
@@ -98,7 +98,7 @@ Repository: w3c/csswg-drafts
 Test Suite: https://github.com/web-platform-tests/wpt/tree/master/web-animations
 
 Ignored Terms: double, boolean, unsigned long, unrestricted double, (unrestricted double or DOMString)
-Ignored Vars: did seek, synchronously notify, auto-rewind
+Ignored Vars: did seek, synchronously notify, auto-rewind, did trigger
 Markup Shorthands: markdown yes
 Include Mdn Panels: no
@@ -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. + * Running the [=update an animation's finished state=] procedure for any animations whose [=animation/current time=] has been updated. @@ -3537,6 +3540,141 @@ Calculating progress {#core-animation-effect-calculations} The final output iteration progress of an [=animation effect=] is simply its [=transformed progress=]. +Animation Triggers {#triggers} +----------------- + +### Overview ### {#triggers-overview} + +An animation trigger 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| +has an internal state that can be one of the following: + +
+
idle +
+ The [=animation effect=] associated with |trigger| remains in + its [=animation effect/before phase=] and stays at zero [=animation/start time=]. + +
primary +
+ The ''primary'' effect defined by |type| is applied to its associated [=animation=]. + +
inverse +
+ The ''inverse'' effect defined by |type| is applied to its associated [=animation=]. + +
+ +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: + +
+ : If |trigger|’s [=local time=] is [=unresolved=], + :: + Then |state| is ''animation trigger state/idle'', and |did trigger| is set to false. + + : Otherwise, + :: + +
+ : If |trigger| is inside its [=active interval=], + :: + Then |state| is ''animation trigger state/primary'', and |did trigger| is set to true. + + : Otherwise, + :: + +
+ : If |did trigger| flag is false, + :: + Then |state| is ''animation trigger state/idle''. + + : Otherwise, + :: + |state| is ''animation trigger state/inverse''. + +
+ +
+ +
+ +### Animation Trigger Types ### {#trigger-types} + +The behavior an [=animation trigger=] applies to its associated [=animation=]’s +playback is defined by its animation trigger type, +which can be one of the following: + +
+
once +
+ The ''primary'' behavior is [=play an animation|triggering=] the associated animation. + +
repeat +
+ 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''. + +
alternate +
+
+ : 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. + +
+ + The ''inverse'' behavior is [=reverse an animation|reversing=] the associated animation. + +
state +
+ The ''primary'' behavior is [=play an animation|triggering or resuming=] the associated animation. + The ''inverse'' behavior is [=pause an animation|pausing=] the associated animation. +
+ +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=], +its default range, 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 exit range. The [=exit range=] is used to replace [=default range=] and extend +the [=active interval=] of an [=animation trigger=] |trigger| as follows: + +
+ : If |trigger| is inside its [=active interval=], + :: + It’s attached to its [=exit range=]. + + : Otherwise, + :: + It’s attached to its [=default range=]. + +
+ +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? + From 9ae1a135aa0354596ec0a5b952c5077583b9dae8 Mon Sep 17 00:00:00 2001 From: Yehonatan Daniv Date: Thu, 18 Apr 2024 09:04:49 +0300 Subject: [PATCH 06/13] Fixed idle state definition for animation trigger state --- web-animations-1/Overview.bs | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/web-animations-1/Overview.bs b/web-animations-1/Overview.bs index b25648cbdd7..70aac8900e9 100644 --- a/web-animations-1/Overview.bs +++ b/web-animations-1/Overview.bs @@ -3555,21 +3555,22 @@ 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 state that can be one of the following:
idle
- The [=animation effect=] associated with |trigger| remains in + The [=animation effect=] associated |animation| remains in its [=animation effect/before phase=] and stays at zero [=animation/start time=].
primary
- The ''primary'' effect defined by |type| is applied to its associated [=animation=]. + The ''primary'' effect defined by |type| is applied to |animation|.
inverse
- The ''inverse'' effect defined by |type| is applied to its associated [=animation=]. + The ''inverse'' effect defined by |type| is applied to |animation|.
From f1d2e8929f0190b7363aa6edaeec337efa55ccf9 Mon Sep 17 00:00:00 2001 From: Yehonatan Daniv Date: Sat, 11 May 2024 16:51:19 +0300 Subject: [PATCH 07/13] Moved all new definitions from web-animations-1 to web-animations-2 --- css-animations-2/Overview.bs | 1 + web-animations-1/Overview.bs | 138 +--------------------------------- web-animations-2/Overview.bs | 139 ++++++++++++++++++++++++++++++++++- 3 files changed, 140 insertions(+), 138 deletions(-) diff --git a/css-animations-2/Overview.bs b/css-animations-2/Overview.bs index 51c6d871170..5e75b8ecbff 100644 --- a/css-animations-2/Overview.bs +++ b/css-animations-2/Overview.bs @@ -68,6 +68,7 @@ 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 diff --git a/web-animations-1/Overview.bs b/web-animations-1/Overview.bs index 70aac8900e9..5d94e615c01 100644 --- a/web-animations-1/Overview.bs +++ b/web-animations-1/Overview.bs @@ -98,7 +98,7 @@ Repository: w3c/csswg-drafts Test Suite: https://github.com/web-platform-tests/wpt/tree/master/web-animations Ignored Terms: double, boolean, unsigned long, unrestricted double, (unrestricted double or DOMString) -Ignored Vars: did seek, synchronously notify, auto-rewind, did trigger +Ignored Vars: did seek, synchronously notify, auto-rewind Markup Shorthands: markdown yes Include Mdn Panels: no @@ -3540,142 +3540,6 @@ Calculating progress {#core-animation-effect-calculations} The final output iteration progress of an [=animation effect=] is simply its [=transformed progress=]. -Animation Triggers {#triggers} ------------------ - -### Overview ### {#triggers-overview} - -An animation trigger 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 state that can be one of the following: - -
-
idle -
- The [=animation effect=] associated |animation| remains in - its [=animation effect/before phase=] and stays at zero [=animation/start time=]. - -
primary -
- The ''primary'' effect defined by |type| is applied to |animation|. - -
inverse -
- The ''inverse'' effect defined by |type| is applied to |animation|. - -
- -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: - -
- : If |trigger|’s [=local time=] is [=unresolved=], - :: - Then |state| is ''animation trigger state/idle'', and |did trigger| is set to false. - - : Otherwise, - :: - -
- : If |trigger| is inside its [=active interval=], - :: - Then |state| is ''animation trigger state/primary'', and |did trigger| is set to true. - - : Otherwise, - :: - -
- : If |did trigger| flag is false, - :: - Then |state| is ''animation trigger state/idle''. - - : Otherwise, - :: - |state| is ''animation trigger state/inverse''. - -
- -
- -
- -### Animation Trigger Types ### {#trigger-types} - -The behavior an [=animation trigger=] applies to its associated [=animation=]’s -playback is defined by its animation trigger type, -which can be one of the following: - -
-
once -
- The ''primary'' behavior is [=play an animation|triggering=] the associated animation. - -
repeat -
- 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''. - -
alternate -
-
- : 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. - -
- - The ''inverse'' behavior is [=reverse an animation|reversing=] the associated animation. - -
state -
- The ''primary'' behavior is [=play an animation|triggering or resuming=] the associated animation. - The ''inverse'' behavior is [=pause an animation|pausing=] the associated animation. -
- -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=], -its default range, 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 exit range. The [=exit range=] is used to replace [=default range=] and extend -the [=active interval=] of an [=animation trigger=] |trigger| as follows: - -
- : If |trigger| is inside its [=active interval=], - :: - It’s attached to its [=exit range=]. - - : Otherwise, - :: - It’s attached to its [=default range=]. - -
- -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? - diff --git a/web-animations-2/Overview.bs b/web-animations-2/Overview.bs index 72168a59047..885c25dacfa 100644 --- a/web-animations-2/Overview.bs +++ b/web-animations-2/Overview.bs @@ -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 
 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.
 
 
 
+Animation Triggers {#triggers}
+-----------------
+
+### Overview ### {#triggers-overview}
+
+An animation trigger 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 state that can be one of the following:
+
+

+  
idle
+  

+    The [=animation effect=] associated |animation| remains in
+    its [=animation effect/before phase=] and stays at zero [=animation/start time=].
+
+  
primary
+  

+    The ''primary'' effect defined by |type| is applied to |animation|.
+
+  
inverse
+  

+    The ''inverse'' effect defined by |type| is applied to |animation|.
+
+

+
+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:
+
+

+  : If |trigger|’s [=local time=] is [=unresolved=],
+  ::
+    Then |state| is ''animation trigger state/idle'', and |did trigger| is set to false.
+
+  : Otherwise,
+  ::
+
+    

+      : If |trigger| is inside its [=active interval=],
+      ::
+        Then |state| is ''animation trigger state/primary'', and |did trigger| is set to true.
+
+      : Otherwise,
+      ::
+
+        

+          : If |did trigger| flag is false,
+          ::
+            Then |state| is ''animation trigger state/idle''.
+
+          : Otherwise,
+          ::
+            |state| is ''animation trigger state/inverse''.
+
+        

+
+    

+
+

+
+### Animation Trigger Types ### {#trigger-types}
+
+The behavior an [=animation trigger=] applies to its associated [=animation=]’s
+playback is defined by its animation trigger type,
+which can be one of the following:
+
+

+  
once
+  

+    The ''primary'' behavior is [=play an animation|triggering=] the associated animation.
+
+  
repeat
+  

+    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''.
+
+  
alternate
+  

+    

+      : 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.
+
+    

+
+    The ''inverse'' behavior is [=reverse an animation|reversing=] the associated animation.
+
+  
state
+  

+    The ''primary'' behavior is [=play an animation|triggering or resuming=] the associated animation.
+    The ''inverse'' behavior is [=pause an animation|pausing=] the associated animation.
+

+
+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=],
+its default range, 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 exit range. The [=exit range=] is used to replace [=default range=] and extend
+the [=active interval=] of an [=animation trigger=] |trigger| as follows:
+
+

+  : If |trigger| is inside its [=active interval=],
+  ::
+    It’s attached to its [=exit range=].
+
+  : Otherwise,
+  ::
+    It’s attached to its [=default range=].
+
+

+
+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?
+
 
 
 
Programming interface


From e55e476ab817670e87fd32c814a0c811f3749f58 Mon Sep 17 00:00:00 2001
From: Yehonatan Daniv 
Date: Sun, 2 Jun 2024 22:57:58 +0300
Subject: [PATCH 08/13] Added a description to each property of
 animation-trigger; Moved the delta of animation-frame-loop from
 web-animations-1 to web-animations-2

---
 css-animations-2/Overview.bs | 123 ++++++++++++++++++++++++++++++++---
 web-animations-1/Overview.bs |   3 -
 web-animations-2/Overview.bs |  22 +++++++
 3 files changed, 137 insertions(+), 11 deletions(-)

diff --git a/css-animations-2/Overview.bs b/css-animations-2/Overview.bs
index 5e75b8ecbff..f15c2bf663b 100644
--- a/css-animations-2/Overview.bs
+++ b/css-animations-2/Overview.bs
@@ -71,6 +71,9 @@ spec:web-animations-1; type:dfn;
 spec:web-animations-2; type:dfn;
     text:default range
     text:exit range
+spec:scroll-animations-1; type:dfn;
+	text:animation-range-start
+	text:animation-range-end

Delta specification

@@ -723,6 +726,33 @@ Canonical order: per grammar <single-animation-trigger-type> = once | repeat | alternate | state +The values of 'animation-trigger-type' have the following meaning +for an [=animation trigger=] that enters its [=active interval=]: + +
+
once +
+ The animation is triggered and played once and only once. + +
repeat +
+ The animation is played from the beginning each time it is triggered. + When the trigger’s [=active interval=] is exited the animation is reset. + +
alternate +
+ The animation is played forwards, according to its [=playback direction=], each time it is triggered. + When the trigger’s [=active interval=] is exited the animation is reversed. + +
state +
+ The animation is triggered and played once. + When the trigger’s [=active interval=] is exited the animation is paused. + When the trigger’s [=active interval=] is re-entered the animation is resumed. +
+ +The behavior of each value is defined in [[web-animations-2#trigger-types]]. + ## The 'animation-trigger-timeline' property ## {#animation-trigger-timeline} The 'animation-trigger-timeline' property specifies the timeline @@ -746,19 +776,24 @@ Canonical order: per grammar Animation Type: not animatable +The values of 'animation-trigger-timeline' have the same meaning as those of 'animation-timeline'. + Issue: Probably a trigger with timeline "none" is under-specified here. Need to clarify what it means. ## The 'animation-trigger-range' property ## {#animation-trigger-range} +
+  Name: animation-trigger-range
+  Value: [ <<'animation-trigger-range-start'>> <<'animation-trigger-range-end'>>? ]#
+
+ 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=]. +It has the same syntax as the 'animation-range' property. -
-  Name: animation-trigger-range
-  Value: [ <<'animation-range-start'>> <<'animation-range-end'>>? ]#
-
+The behavior of 'animation-trigger-range' is defined in [[web-animations-2#trigger-ranges]]. ## The 'animation-trigger-range-start' property ## {#animation-trigger-range-start} @@ -776,6 +811,8 @@ specifying the [=animation trigger=]’s associated [=default range=]. The 'animation-trigger-range-start' property specifies the start of the [=animation trigger=]’s associated [=default range=]. +The values of 'animation-trigger-range-start' have the same meaning as those of 'animation-range-start'. + ## The 'animation-trigger-range-end' property ## {#animation-trigger-range-end} 
@@ -792,6 +829,8 @@ associated [=default range=].
 The 'animation-trigger-range-end' property specifies the end of the [=animation trigger=]’s
 associated [=default range=].
 
+The values of 'animation-trigger-range-end' have the same meaning as those of 'animation-range-end'.
+
 ## The 'animation-trigger-exit-range' property ## {#animation-trigger-exit-range}
 
 
@@ -803,13 +842,21 @@ 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=].
+It has the same syntax as the 'animation-range' property, with the addition of the ''auto'' keyword.
+
+The [=exit range=] replaces the [=default range=] once the [=animation trigger=]’s [=active interval=] is entered,
+and redefines the extent of the [=animation trigger=]’s [=active interval=].
+It is used to extend the [=default range=], for example,
+in cases where exiting the [=active interval=] may create a visual jump that needs to be avoided.
+
+The behavior of 'animation-trigger-exit-range' is further defined in [[web-animations-2#trigger-ranges]].
 
 ## The 'animation-trigger-exit-range-start' property ## {#animation-trigger-exit-range-start}
 
 
   Name: animation-trigger-exit-range-start
-  Value: [ normal | <> | <> <>? ]#
-  Initial: normal
+  Value: [ auto | normal | <> | <> <>? ]#
+  Initial: auto
   Applies to: all elements
   Inherited: no
   Percentages: relative to the specified [=named timeline range=] if one was specified, else to the entire timeline
@@ -820,12 +867,42 @@ specifying the [=animation trigger=]’s associated [=exit range=].
 The 'animation-trigger-exit-range-start' property specifies the start of the [=animation trigger=]’s
 associated [=exit range=].
 
+The values of 'animation-trigger-exit-range-start' have the following meaning:
+
+

+	
auto
+	

+		The start of the trigger’s [=exit range=]
+		is equal to the start of its [=default range=].
+
+	
normal
+	

+		The start of the trigger’s [=exit range=]
+		is the start of its associated [=timeline=];
+		the start of the trigger’s [=active interval=]
+		is determined as normal.
+
+	
<>
+	

+		The [=exit range=] starts
+		at the specified point on the [=timeline=]
+		measuring from the start of the timeline.
+
+	
<> <>?
+	

+		The [=exit range=] starts
+		at the specified point on the [=timeline=]
+		measuring from the start of the specified [=named timeline range=].
+		If the <> is omitted,
+		it defaults to 0%.
+

+
 ## The 'animation-trigger-exit-range-end' property ## {#animation-trigger-exit-range-end}
 
 
   Name: animation-trigger-exit-range-end
-  Value: [ normal | <> | <> <>? ]#
-  Initial: normal
+  Value: [ auto | normal | <> | <> <>? ]#
+  Initial: auto
   Applies to: all elements
   Inherited: no
   Percentages: relative to the specified [=named timeline range=] if one was specified, else to the entire timeline
@@ -836,6 +913,36 @@ associated [=exit range=].
 The 'animation-trigger-exit-range-end' property specifies the end of the [=animation trigger=]’s
 associated [=exit range=].
 
+The values of 'animation-trigger-exit-range-start' have the following meaning:
+
+

+	
auto
+	

+		The end of the trigger’s [=exit range=]
+		is equal to the end of its [=default range=].
+
+	
normal
+		

+			The end of the trigger’s [=exit range=]
+			is the end of its associated [=timeline=];
+			the end of the trigger’s [=active interval=]
+			is determined as normal.
+
+		
<>
+		

+			The [=exit range=] ends
+			at the specified point on the [=timeline=]
+			measuring from the start of the timeline.
+
+		
<> <>?
+		

+			The [=exit range=] ends
+			at the specified point on the [=timeline=]
+			measuring from the start of the specified [=named timeline range=].
+			If the <> is omitted,
+			it defaults to 100%.
+

+
 ## The 'animation-trigger' property ## {#animation-trigger}
 
 The 'animation-trigger' property is a [=shorthand property|shorthand=]
diff --git a/web-animations-1/Overview.bs b/web-animations-1/Overview.bs
index 5d94e615c01..4573617ab42 100644
--- a/web-animations-1/Overview.bs
+++ b/web-animations-1/Overview.bs
@@ -772,9 +772,6 @@ 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.
-
           * Running the [=update an animation's finished state=] procedure
               for any animations whose [=animation/current time=] has been updated.
 
diff --git a/web-animations-2/Overview.bs b/web-animations-2/Overview.bs
index 885c25dacfa..7d3e9f00759 100644
--- a/web-animations-2/Overview.bs
+++ b/web-animations-2/Overview.bs
@@ -222,6 +222,28 @@ Add:
 > case, the timeline is a progress-based
 > timeline, and its [=timeline duration=] is 100%.
 
+
Animation frames

+
+This section extends the definition of the [=update animations and send events=]
+procedure to include the following extra step:
+
+    

+        When asked to [=update animations and send events=]
+        for a {{Document}} |doc| at timestamp |now|,
+        run this step:
+
+    1. Update the [=timeline/current time=] of all timelines
+        associated with |doc|
+        passing |now| as the timestamp.
+        Run the following step first:
+
+        

+		    * Updating the [=animation trigger state=] of any [=animation trigger=]
+			    [=associated with a timeline|associated with=] the timeline.
+        

+
+    

+
 
Animations

 
 Append:

From a0e90fe412a458df583b4da9eeffd426e4f7816f Mon Sep 17 00:00:00 2001
From: Yehonatan Daniv 
Date: Thu, 6 Jun 2024 21:46:43 +0300
Subject: [PATCH 09/13] Fixed some syntax errors

---
 web-animations-2/Overview.bs | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/web-animations-2/Overview.bs b/web-animations-2/Overview.bs
index 7d3e9f00759..17fd2be67b5 100644
--- a/web-animations-2/Overview.bs
+++ b/web-animations-2/Overview.bs
@@ -227,7 +227,7 @@ Add:
 This section extends the definition of the [=update animations and send events=]
 procedure to include the following extra step:
 
-    

+    

         When asked to [=update animations and send events=]
         for a {{Document}} |doc| at timestamp |now|,
         run this step:
@@ -238,8 +238,8 @@ procedure to include the following extra step:
         Run the following step first:
 
         

-		    * Updating the [=animation trigger state=] of any [=animation trigger=]
-			    [=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.
         

 
     

@@ -942,7 +942,7 @@ with:
 >
 >    1. If |has finite timeline| is true,
 >        and the |animation|'s [=animation/current time=] is [=unresolved=]
->    * Set the |auto align start time| flag to true.
+>        * Set the |auto align start time| flag to true.
 
 Replace:
 
@@ -1003,8 +1003,8 @@ Add the following sentence:
     

 
     : If any of the following are true:
-      * |animation| does not have an [=animation/associated effect=], or
-      * |animation|'s [=animation/current time=] is an [=unresolved=] time value,
+        * |animation| does not have an [=animation/associated effect=], or
+        * |animation|'s [=animation/current time=] is an [=unresolved=] time value,
     ::
         |animation|'s [=animation/progress=] is null.
     : If |animation|'s [=associated effect end=] is zero,
@@ -1019,10 +1019,10 @@ Add the following sentence:
         |animation|'s [=animation/progress=] is zero.
     : Otherwise,
     ::
-      

-        progress = min(max([=animation/current time=] / |animation|'s [=associated effect end=], 0), 1)
-        
-      

+        

+          progress = min(max([=animation/current time=] / |animation|'s [=associated effect end=], 0), 1)
+          
+        

 
     

   

@@ -3252,6 +3252,7 @@ partial interface KeyframeEffect {
 ::  Amend the procedure to create a new {{KeyframeEffect}} object with the
     same properties as {{KeyframeEffect/KeyframeEffect(source)/source}} to include setting the
     iteration composite operation from source on effect.
+
 
 
 

@@ -3262,6 +3263,7 @@ partial interface KeyframeEffect {
 
     On setting, sets the iteration composite operation property of this
     animation effect to the provided value.
+
 

 
 
Creating a new KeyframeEffect object

@@ -3457,6 +3459,7 @@ partial dictionary KeyframeAnimationOptions {
     and {{TimelineRangeOffset/offset}};
     a {{CSSNumericValue}} is interpreted as a {{TimelineRangeOffset}}
     with that {{TimelineRangeOffset/offset}} and a null {{TimelineRangeOffset/rangeName}}.
+
 
 
 Passing a {{CSSKeywordValue}} with a {{CSSKeywordValue/value}} other than "normal"

From 361f5d9f30020d10cd799779c1457236e2dd955b Mon Sep 17 00:00:00 2001
From: Yehonatan Daniv 
Date: Thu, 6 Jun 2024 21:52:56 +0300
Subject: [PATCH 10/13] Added an issue about timeline becoming idle and
 did-trigger resetting to false

---
 web-animations-2/Overview.bs | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/web-animations-2/Overview.bs b/web-animations-2/Overview.bs
index 17fd2be67b5..988e0452c41 100644
--- a/web-animations-2/Overview.bs
+++ b/web-animations-2/Overview.bs
@@ -2447,6 +2447,8 @@ given a flag |did trigger|, as follows:
+Issue: Should it be the correct/expected behavior for the "did trigger" flag to reset to false if the timeline becomes idle again? + ### Animation Trigger Types ### {#trigger-types} The behavior an [=animation trigger=] applies to its associated [=animation=]’s From efa38c78cf81894a47c0ec28f02f00caa18e3d69 Mon Sep 17 00:00:00 2001 From: Yehonatan Daniv Date: Thu, 6 Jun 2024 23:12:25 +0300 Subject: [PATCH 11/13] Define animation trigger active interval --- css-animations-2/Overview.bs | 23 +++++++++++++---------- web-animations-2/Overview.bs | 16 ++++++++++++---- 2 files changed, 25 insertions(+), 14 deletions(-) diff --git a/css-animations-2/Overview.bs b/css-animations-2/Overview.bs index f15c2bf663b..68204c7a59c 100644 --- a/css-animations-2/Overview.bs +++ b/css-animations-2/Overview.bs @@ -69,6 +69,7 @@ spec:web-animations-1; type:dfn; text:target element text:unresolved spec:web-animations-2; type:dfn; + text:active interval; for:animation trigger text:default range text:exit range spec:scroll-animations-1; type:dfn; @@ -727,7 +728,7 @@ Canonical order: per grammar <single-animation-trigger-type> = once | repeat | alternate | state The values of 'animation-trigger-type' have the following meaning -for an [=animation trigger=] that enters its [=active interval=]: +for an [=animation trigger=] that enters its [=animation trigger/active interval|active interval=]:
once @@ -737,18 +738,18 @@ for an [=animation trigger=] that enters its [=active interval=]:
repeat
The animation is played from the beginning each time it is triggered. - When the trigger’s [=active interval=] is exited the animation is reset. + When the trigger’s [=animation trigger/active interval|active interval=] is exited the animation is reset.
alternate
The animation is played forwards, according to its [=playback direction=], each time it is triggered. - When the trigger’s [=active interval=] is exited the animation is reversed. + When the trigger’s [=animation trigger/active interval|active interval=] is exited the animation is reversed.
state
The animation is triggered and played once. - When the trigger’s [=active interval=] is exited the animation is paused. - When the trigger’s [=active interval=] is re-entered the animation is resumed. + When the trigger’s [=animation trigger/active interval|active interval=] is exited the animation is paused. + When the trigger’s [=animation trigger/active interval|active interval=] is re-entered the animation is resumed.
The behavior of each value is defined in [[web-animations-2#trigger-types]]. @@ -844,10 +845,12 @@ together in a single declaration, specifying the [=animation trigger=]’s associated [=exit range=]. It has the same syntax as the 'animation-range' property, with the addition of the ''auto'' keyword. -The [=exit range=] replaces the [=default range=] once the [=animation trigger=]’s [=active interval=] is entered, -and redefines the extent of the [=animation trigger=]’s [=active interval=]. +The [=exit range=] replaces the [=default range=] once the [=animation trigger=]’s +[=animation trigger/active interval|active interval=] is entered, +and redefines the extent of the [=animation trigger=]’s [=animation trigger/active interval|active interval=]. It is used to extend the [=default range=], for example, -in cases where exiting the [=active interval=] may create a visual jump that needs to be avoided. +in cases where exiting the [=animation trigger/active interval|active interval=] +may create a visual jump that needs to be avoided. The behavior of 'animation-trigger-exit-range' is further defined in [[web-animations-2#trigger-ranges]]. @@ -879,7 +882,7 @@ The values of 'animation-trigger-exit-range-start' have the following meaning:
The start of the trigger’s [=exit range=] is the start of its associated [=timeline=]; - the start of the trigger’s [=active interval=] + the start of the trigger’s [=animation trigger/active interval|active interval=] is determined as normal.
<> @@ -925,7 +928,7 @@ The values of 'animation-trigger-exit-range-start' have the following meaning:
The end of the trigger’s [=exit range=] is the end of its associated [=timeline=]; - the end of the trigger’s [=active interval=] + the end of the trigger’s [=animation trigger/active interval|active interval=] is determined as normal.
<> diff --git a/web-animations-2/Overview.bs b/web-animations-2/Overview.bs index 988e0452c41..e36d3c503f6 100644 --- a/web-animations-2/Overview.bs +++ b/web-animations-2/Overview.bs @@ -2388,6 +2388,14 @@ and are attached to an [=animation attachment range|attachment range=]. Issue: Should there be any effect of triggers on scroll-driven animations? +### Animation Trigger Active Interval ### {#trigger-active-interval} + +[=Animation triggers=] define an active interval, +which is the period of time during which the trigger is scheduled to produce its effect +on its associated [=animation=]’s playback. +Each [=animation trigger=] has only one such interval, +which is defined by its [=default range=] and [=exit range=]. + ### Animation Trigger State ### {#trigger-state} An [=animation trigger=] |trigger| with [=animation trigger type=] |type| @@ -2425,7 +2433,7 @@ given a flag |did trigger|, as follows: ::
- : If |trigger| is inside its [=active interval=], + : If |trigger| is inside its [=animation trigger/active interval|active interval=], :: Then |state| is ''animation trigger state/primary'', and |did trigger| is set to true. @@ -2491,16 +2499,16 @@ 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=], -its default range, which defines its [=active interval=]. +its default range, which defines its [=animation trigger/active interval|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 exit range. The [=exit range=] is used to replace [=default range=] and extend -the [=active interval=] of an [=animation trigger=] |trigger| as follows: +the [=animation trigger/active interval|active interval=] of an [=animation trigger=] |trigger| as follows:
- : If |trigger| is inside its [=active interval=], + : If |trigger| is inside its [=animation trigger/active interval|active interval=], :: It’s attached to its [=exit range=]. From 11e313880fdb57ab729b84d7a8323599dfd42dfd Mon Sep 17 00:00:00 2001 From: Yehonatan Daniv Date: Wed, 31 Jul 2024 22:39:05 +0300 Subject: [PATCH 12/13] Rewrite again according to review --- web-animations-2/Overview.bs | 201 +++++++++++++++++------------------ 1 file changed, 96 insertions(+), 105 deletions(-) diff --git a/web-animations-2/Overview.bs b/web-animations-2/Overview.bs index 5dea96be88b..ea0cc9b5752 100644 --- a/web-animations-2/Overview.bs +++ b/web-animations-2/Overview.bs @@ -222,28 +222,6 @@ Add: > case, the timeline is a progress-based > timeline, and its [=timeline duration=] is 100%. -

Animation frames

- -This section extends the definition of the [=update animations and send events=] -procedure to include the following extra step: - -
- When asked to [=update animations and send events=] - for a {{Document}} |doc| at timestamp |now|, - run this step: - - 1. Update the [=timeline/current time=] of all timelines - associated with |doc| - passing |now| as the timestamp. - Run the following step first: - -
- * Updating the [=animation trigger state=] of any [=animation trigger=] - [=associated with a timeline|associated with=] the timeline. -
- -
-

Animations

Append: @@ -2388,19 +2366,58 @@ and are attached to an [=animation attachment range|attachment range=]. Issue: Should there be any effect of triggers on scroll-driven animations? -### Animation Trigger Active Interval ### {#trigger-active-interval} +### Animation Trigger Types ### {#trigger-types} + +The behavior an [=animation trigger=] applies to its associated [=animation=]’s +playback is defined by its animation trigger type, and +depending on its [=animation trigger state|state=] can apply one of two +distinct behavior types: ''primary'' or ''inverse''. +Given an internal |did trigger| flag, the values of [=animation trigger type=] +can be one of the following: + +
+
once +
+ The ''primary'' behavior is [=play an animation|triggering=] the associated animation. + +
repeat +
+ The ''primary'' behavior is [=play an animation|triggering=] the associated animation. + The ''inverse'' behavior is resetting the associated [=animation effect=] back to + its [=animation effect/before phase=] and its associated animation’s [=animation/start time=] to zero. + +
alternate +
+
+ : if the |did trigger| flag is false, + :: + The ''primary'' behavior is [=play an animation|triggering=] the associated animation. -[=Animation triggers=] define an active interval, -which is the period of time during which the trigger is scheduled to produce its effect -on its associated [=animation=]’s playback. -Each [=animation trigger=] has only one such interval, -which is defined by its [=default range=] and [=exit range=]. + : Otherwise, + :: + The ''primary'' behavior is [=reverse an animation|reversing=] the associated animation. + +
+ + The ''inverse'' behavior is [=reverse an animation|reversing=] the associated animation. + +
state +
+ The ''primary'' behavior is [=play an animation|triggering or resuming=] the associated animation. + The ''inverse'' behavior is [=pause an animation|pausing=] the associated animation. +
+ +Issue: Need to bike-shed the name for type "state" type. + +Issue: Do we need a proper definition for "behavior types primary/inverse"? ### Animation Trigger State ### {#trigger-state} An [=animation trigger=] |trigger| with [=animation trigger type=] |type| and an associated [=animation=] |animation| -has an internal state that can be one of the following: +has an internal state which +controls the applied behavior type. This state has discrete values +which can be one of the following:
idle @@ -2410,117 +2427,91 @@ has an internal state that can be
primary
- The ''primary'' effect defined by |type| is applied to |animation|. + When switched to this value the ''primary'' behavior type defined by |type| is applied to |animation|.
inverse
- The ''inverse'' effect defined by |type| is applied to |animation|. + When switched to this value the ''inverse'' behavior type defined by |type| is applied to |animation|.
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: - -
- : If |trigger|’s [=local time=] is [=unresolved=], - :: - Then |state| is ''animation trigger state/idle'', and |did trigger| is set to false. +### Animation Trigger Active Interval ### {#trigger-active-interval} - : Otherwise, - :: +Each [=animation trigger=] defines an active interval +and only one such interval. This interval is the segment of the timeline’s progress +during which the trigger’s [=animation trigger state|state=] is set to ''primary''. -
- : If |trigger| is inside its [=animation trigger/active interval|active interval=], - :: - Then |state| is ''animation trigger state/primary'', and |did trigger| is set to true. +### Animation Trigger Ranges ### {#trigger-ranges} - : Otherwise, - :: +An [=animation trigger=] has two [=animation attachment range|ranges=], +the default range and the exit range. +The [=exit range=] is used to replace [=default range=] and extend +the [=animation trigger/active interval|active interval=]. -
- : If |did trigger| flag is false, - :: - Then |state| is ''animation trigger state/idle''. +Issue: Should we specify that that exit range’s edges can only be equal to or greater than the default range’s edges? - : Otherwise, - :: - |state| is ''animation trigger state/inverse''. +Depending on its most recent [=animation trigger state|state=] |state|, the +[=animation trigger/active interval|active interval=] is defined as follows: -
+
+ : If |state| is ''animation trigger state/primary'', + :: + Then |interval| is set to [=exit range=]. -
+ : Otherwise, + :: + |interval| is [=default range=].
-Issue: Should it be the correct/expected behavior for the "did trigger" flag to reset to false if the timeline becomes idle again? - -### Animation Trigger Types ### {#trigger-types} - -The behavior an [=animation trigger=] applies to its associated [=animation=]’s -playback is defined by its animation trigger type, -which can be one of the following: +### Updating Animation Trigger State ### {#updating-trigger-state} -
-
once -
- The ''primary'' behavior is [=play an animation|triggering=] the associated animation. +When updating the [=timeline/current time=] of an [=animation trigger=] |trigger|, +the [=animation trigger state=] |state| of an [=animation trigger=] |trigger| +with a given a flag |did trigger| is updated as follows: -
repeat -
- 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''. +
+ 1. Let |did trigger| be a boolean flag that is initially false. -
alternate -
+ 1. Set |state| as follows:
- : if the |did trigger| flag is false, + : If |trigger|’s [=local time=] is [=unresolved=], :: - The ''primary'' behavior is [=play an animation|triggering=] the associated animation. + 1. Set |state| to ''animation trigger state/idle''. + 1. Set |did trigger| to false. : Otherwise, :: - The ''primary'' behavior is [=reverse an animation|reversing=] the associated animation. - -
- - The ''inverse'' behavior is [=reverse an animation|reversing=] the associated animation. - -
state -
- The ''primary'' behavior is [=play an animation|triggering or resuming=] the associated animation. - The ''inverse'' behavior is [=pause an animation|pausing=] the associated animation. -
-Issue: Need to bike-shed the name for type "state" type. +
+ : If |trigger| is inside its [=animation trigger/active interval|active interval=], + :: + 1. Set |state| to ''animation trigger state/primary''. + 1. Set |did trigger| to true. -### Animation Trigger Ranges ### {#trigger-ranges} + : Otherwise, + :: -An [=animation trigger=] has at least one [=animation attachment range|range=], -its default range, which defines its [=animation trigger/active interval|active interval=]. -This range defines when the [=animation trigger|trigger=] is in its ''animation trigger state/primary'' state, -as specified in [[#trigger-state]]. +
+ : If |did trigger| flag is false, + :: + Then set |state| to ''animation trigger state/idle''. -An [=animation trigger=] may also have a second [=animation attachment range|range=], -the exit range. The [=exit range=] is used to replace [=default range=] and extend -the [=animation trigger/active interval|active interval=] of an [=animation trigger=] |trigger| as follows: + : Otherwise, + :: + Set |state| to ''animation trigger state/inverse''. -
- : If |trigger| is inside its [=animation trigger/active interval|active interval=], - :: - It’s attached to its [=exit range=]. +
- : Otherwise, - :: - It’s attached to its [=default range=]. +
-
+
-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? +Issue: Should it be the correct/expected behavior for the "did trigger" flag to reset to false if the timeline becomes idle again? From 7777ac11bc619bf5e09db42aa3cd91fd4b6370ff Mon Sep 17 00:00:00 2001 From: Yehonatan Daniv Date: Mon, 19 Aug 2024 09:49:06 +0300 Subject: [PATCH 13/13] Added the AnimationTrigger interface; Added setting timeline of animation trigger algo; Fixed updating animation trigger state algo --- web-animations-2/Overview.bs | 222 ++++++++++++++++++++++++++++++++--- 1 file changed, 205 insertions(+), 17 deletions(-) diff --git a/web-animations-2/Overview.bs b/web-animations-2/Overview.bs index ea0cc9b5752..3d10b8ffc79 100644 --- a/web-animations-2/Overview.bs +++ b/web-animations-2/Overview.bs @@ -134,6 +134,7 @@ urlPrefix: https://drafts.csswg.org/web-animations-1/; type: dfn; spec: web-anim text: update the timing properties of an animation effect text: unresolved text: update an animation's finished state + text: default document timeline urlPrefix: https://webidl.spec.whatwg.org/; type: dfn; spec: webidl text: resolve a promise; url: resolve urlPrefix: http://www.ecma-international.org/ecma-262/6.0/#sec-; type: dfn; spec: ecma-262 @@ -2466,13 +2467,29 @@ Depending on its most recent [=animation trigger state|state=] |state|, the
-### Updating Animation Trigger State ### {#updating-trigger-state} +### Setting the timeline of an Animation Trigger ### {#setting-trigger-timeline} + +
+ The procedure of setting timeline of animation trigger |trigger|, + to |new timeline| which may be null, is as follows: + + 1. Let |old timeline| be the current [=timeline=] of |trigger|, if any. -When updating the [=timeline/current time=] of an [=animation trigger=] |trigger|, -the [=animation trigger state=] |state| of an [=animation trigger=] |trigger| -with a given a flag |did trigger| is updated as follows: + 1. If |new timeline| is the same object as |old timeline|, abort this procedure. + + 1. Let the [=timeline=] of |trigger| be |new timeline|. + + 1. Run the procedure to [=updating animation trigger state=] for |trigger|. +
+ +### Updating Animation Trigger State ### {#updating-trigger-state}
+ The procedure of updating animation trigger state |state| + of an [=animation trigger=] |trigger|, + with a given a flag |did trigger|, and an [=animation trigger type=] |type|, + is updated as follows: + 1. Let |did trigger| be a boolean flag that is initially false. 1. Set |state| as follows: @@ -2486,24 +2503,34 @@ with a given a flag |did trigger| is updated as follows: ::
- : If |trigger| is inside its [=animation trigger/active interval|active interval=], + : If |type| is ''animation trigger type/once'' and |did trigger| flag is true, :: - 1. Set |state| to ''animation trigger state/primary''. - 1. Set |did trigger| to true. + Then abort this procedure. - : Otherwise, - :: + : Otherwise, + :: -
- : If |did trigger| flag is false, - :: - Then set |state| to ''animation trigger state/idle''. +
+ : If |trigger| is inside its [=animation trigger/active interval|active interval=], + :: + 1. Set |state| to ''animation trigger state/primary''. + 1. Set |did trigger| to true. - : Otherwise, - :: - Set |state| to ''animation trigger state/inverse''. + : Otherwise, + :: -
+
+ : If |did trigger| flag is false, + :: + Then set |state| to ''animation trigger state/idle''. + + : Otherwise, + :: + Set |state| to ''animation trigger state/inverse''. + +
+ +
@@ -3526,6 +3553,167 @@ Update the type for the AnimationPlaybackEventInit members.
+

The AnimationTrigger interface

+ +
+[Exposed=Window]
+interface AnimationTrigger {
+  constructor(optional AnimationTriggerOptions options = {});
+  attribute AnimationTimeline timeline;
+  attribute AnimationTriggerType type;
+  attribute TimelineRangeOffset rangeStart;
+  attribute TimelineRangeOffset rangeEnd;
+  attribute TimelineRangeOffset exitRangeStart;
+  attribute TimelineRangeOffset exitRangeEnd;
+};
+
+ +
+ : AnimationTrigger(|options|) + :: + Creates a new {{AnimationTrigger}} object using the following procedure: + + 1. Create a new {{AnimationTrigger}} object, |trigger|. + + 1. Let |type| be the {{AnimationTriggerOptions/type}} property. + + 1. Let |timeline| be the {{AnimationTriggerOptions/timeline}} property. + + 1. Run the procedure for [=setting timeline of animation trigger=] + on |trigger| passing |timeline| as the new timeline. + + 1. Let |range start| be the {{AnimationTriggerOptions/rangeStart}} property. + + 1. Let |range end| be the {{AnimationTriggerOptions/rangeEnd}} property. + + 1. Set [=default range=] of |trigger| using |range start| and |range end|, + following the same rules as the KeyframeAnimationOption + rangeStart and + rangeEnd respectively. + + 1. Let |exit range start| be the {{AnimationTriggerOptions/exitRangeStart}} property. + + 1. Let |exit range end| be the {{AnimationTriggerOptions/exitRangeEnd}} property. + + 1. Set [=exit range=] of |trigger| using |exit range start| and |exit range end|, + following the same rules above for [=default range=], unless both are missing + in which case the [=exit range=] is set to the [=default range=]. + +
+ + : options + :: Configuration parameters for the newly-created trigger. + +
+ +
+ + : timeline + :: + Returns the [=timeline=] for this trigger + or `null` if this timeline is [=inactive timeline|inactive=]. + + : type + :: + Returns the [=animation trigger type|type=] of this trigger. + + : rangeStart + :: + Returns the [=default range=]’s start of this trigger. + + : rangeEnd + :: + Returns the [=default range=]’s end of this trigger. + + : exitRangeStart + :: + Returns the [=exit range=]’s start of this trigger. + + : exitRangeEnd + :: + Returns the [=exit range=]’s end of this trigger. + +
+ +

The AnimationTriggerOptions dictionary

+ +
+dictionary AnimationTriggerOptions {
+  AnimationTimeline? timeline;
+  AnimationTriggerType? type = "once";
+  TimelineRangeOffset? rangeStart = "normal";
+  TimelineRangeOffset? rangeEnd = "normal";
+  TimelineRangeOffset? exitRangeStart;
+  TimelineRangeOffset? exitRangeEnd;
+};
+
+ +
+ + : timeline + :: + The timeline to which the trigger is associated. + If not specified, the trigger is associated with [=default document timeline=]. + + : type + :: + The type of trigger to create. + If not specified, the trigger is of type ''animation trigger type/once''. + + : rangeStart + :: + The start of the trigger’s [=default range=]. + If not specified, the [=default range=]’s start is set to "normal". + + : rangeEnd + :: + The end of the trigger’s [=default range=]. + If not specified, the [=default range=]’s end is set to "normal". + + : exitRangeStart + :: + The start of the trigger’s [=exit range=]. + If not specified and {{AnimationTriggerOptions/exitRangeEnd}} is specified, + the [=exit range=]’s start is set to "normal". + + : exitRangeEnd + :: + The end of the trigger’s [=exit range=]. + If not specified and {{AnimationTriggerOptions/exitRangeStart}} is specified, + the [=exit range=]’s end is set to "normal". + +
+ +

The AnimationTriggerType enumeration

+ +
+enum AnimationTriggerType { "once", "repeat", "alternate", "state" };
+
+ +
+ + : once + :: + Type ''animation trigger type/once''. + + : repeat + :: + Type ''animation trigger type/repeat''. + + : alternate + :: + Type ''animation trigger type/alternate''. + + : state + :: + Type ''animation trigger type/state''. + +
+

Model liveness

This section is non-normative