diff --git a/css-animations-2/Overview.bs b/css-animations-2/Overview.bs index 647e64b169d..4b6a09829f3 100644 --- a/css-animations-2/Overview.bs +++ b/css-animations-2/Overview.bs @@ -962,14 +962,67 @@ The values of 'animation-trigger-exit-range-start' have the following meaning: it defaults to 100%. +## The 'trigger-name' property ## {#trigger-name} + +The 'trigger-name' property causes an [=event-based animation trigger=] to be created +for any animation whose target element has an 'animation-trigger-event' property +with matching <>. +When an {{Event}} is dispatched with the element having the matching 'trigger-name' property +as {{Event/target}}, +and with {{Event/type}} matching the <> of the +'animation-trigger-event' property on the animation target, the animation's +playback is modified according to its +'animation-trigger-behavior' property, as described for +[=event-based animation triggers=]. + +
+Name: trigger-name
+Value: none | [ <> ]#
+Initial: none
+Applies to: all elements
+Inherited: no
+Percentages: N/A
+Computed value: as specified
+Animation type: not animatable
+
+ +
<trigger-name> = <>
+ +## The 'animation-trigger-event' property ## {#animation-trigger-event} + +The 'animation-trigger-event' property is used to specify the criteria +for [=qualifying events=] that cause an [=event-based animation trigger=] +to perform its effect on its associated [=animation=]. It consists of two parts: +a <> that is matched against the {{Event/type}} of a dispatched {{Event}}, +and an <> that is matched against the 'trigger-name' property +of the event's {{Event/target}}. If both criteria match for a given event +the trigger will perform its effect on its associated [=animation=]. + +If the <> is omitted from <> declaration, +{{Event/target}} is matched against the element +having the 'animation-trigger-event' property itself. + +
+Name: animation-trigger-event
+Value: none | [ <> ]#
+Initial: none
+Applies to: all elements
+Inherited: no
+Percentages: N/A
+Computed value: as specified
+Animation type: not animatable
+
+ +
<single-event-trigger> = event ( <> <>? )
+
<trigger-event-type> = <>
+ ## The 'animation-trigger' property ## {#animation-trigger} The 'animation-trigger' property is a [=shorthand property|shorthand=] that sets 'animation-trigger-behavior', 'animation-trigger-timeline', -'animation-trigger-range-start', 'animation-trigger-range-end', +'animation-trigger-event', '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. +together in a single declaration, specifying the [=animation trigger=] for an animation. 
 Name: animation-trigger
@@ -984,7 +1037,9 @@ Animation Type: not animatable
 
-<single-animation-trigger> = <> || [ none | auto | [ [ <> | <> | <> ] [ normal | <> | <> <>? ]{0,4} ] ]
+<single-animation-trigger> = <> || [ <> | <> ]
+
+<single-timeline-trigger> = none | auto | [ <> | <> | <> ] [ normal | <> | <> <>? ]{0,4}
# Animation Events # {#events} diff --git a/web-animations-2/Overview.bs b/web-animations-2/Overview.bs index 7e244743076..ca22461fef2 100644 --- a/web-animations-2/Overview.bs +++ b/web-animations-2/Overview.bs @@ -143,6 +143,7 @@ urlPrefix: http://www.ecma-international.org/ecma-262/6.0/#sec-; type: dfn; spec text: execution contexts urlPrefix: https://drafts.csswg.org/scroll-animations-1/; type: dfn; spec: scroll-animations-1 text: html-processing-model-event-loops +#interface-event 
@@ -2341,7 +2342,7 @@ Some alternatives under consideration:
 Since custom effects, unlike animation effects, are not limited to
 a single target property, the steps for assessing their
-order of execution differs from animation effects.f
+order of execution differs from animation effects.
 
 Custom effects are executed after all
 animation effects have completed and
@@ -2367,14 +2368,70 @@ Animation Triggers {#triggers}
 
 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=].
+An [=animation trigger=] has a {{AnimationTrigger/behavior}} attribute
+which determines the [=animation trigger|trigger=]'s effect on its
+associated [=animation=]'s playback.
 
 Issue: Should there be any effect of triggers on scroll-driven animations?
 
-### Animation Trigger Internal State ### {#trigger-state}
+There are two types of [=animation triggers=]:
+timeline-based and
+event-based. The
+type of an animation trigger is deduced from its attributes: a
+timeline-based animation trigger will have a non-empty {{AnimationTrigger/timeline}}
+attribute, while an event-based animation trigger will have non-empty
+{{AnimationTrigger/eventTarget}} and {{AnimationTrigger/eventType}} attributes.
+
+### Event-Based Animation Triggers ### {#event-based-trigger}
+
+An [=event-based animation trigger=] executes its {{AnimationTrigger/behavior}}
+when a [=qualifying event=] is dispatched.
+A qualifying event is
+an {{Event!!interface}} with {{Event/type}} matching the trigger's {{AnimationTrigger/eventType}}
+and {{Event/target}} matching the trigger's {{AnimationTrigger/eventTarget}}.
+
+#### Event-Based Animation Trigger Behavior #### {#event-trigger-behavior}
+
+When a [=animation trigger/qualifying event=] is dispatched, the associated
+animation's playback is modified as follows,
+based on the trigger's {{AnimationTrigger/behavior}}
+and the current [=play state=] of the animation:
+
+

+  
''animation-trigger-type/once''

+  
If [=play state=] is [=play state/finished=], do nothing.
+      Otherwise, perform the actions specified for the {{Animation/play}} function.
+  

+
+  
''animation-trigger-type/repeat''

+  
First, if [=play state=] is [=play state/running=] or [=play state/paused=]
+      perform the actions specified for the {{Animation/cancel}} function.
+      Then, in all cases, perform the actions specified for the {{Animation/play}} function.
+  

 
-An [=animation trigger=] |trigger|
+  
''animation-trigger-type/alternate''

+  
If [=play state=] is [=play state/idle=],
+      perform the actions specified for the {{Animation/play}} function.
+      Otherwise, perform the actions specified for the {{Animation/reverse}} function.
+  

+
+  
''animation-trigger-type/state''

+  
If the [=play state=] is [=play state/running=],
+      perform the actions specified for the {{Animation/pause}} function.
+      Otherwise, perform the actions specified for the {{Animation/play}} function.
+  

+

+
+### Timeline-Based Animation Triggers ### {#timeline-based-trigger}
+
+Like animations, [=timeline-based animation triggers=] are associated with a [=timeline=]
+and are attached to an [=animation attachment range|attachment range=].
+Changes to animation playback occur when the associated [=timeline=] transitions
+between inside and outside the [=animation attachment range|attachment range=].
+
+#### Timeline-Based Animation Trigger Internal State #### {#trigger-state}
+
+A [=timeline-based animation trigger=] |trigger|
 has an internal boolean did trigger flag, which is initially false,
 and an internal state with
 these possible values:
@@ -2390,12 +2447,11 @@ updated by the [=updating animation trigger state=] procedure, described below.
 
 Issue: Do we need a formal resolution on the spec of the idle state?
 
-### Animation Trigger Behavior ### {#trigger-behaviors}
+#### Timeline-Based Animation Trigger Behavior #### {#timeline-trigger-behaviors}
 
-An [=animation trigger=] has an associated animation trigger behavior
-which, along with [=did trigger=] and [=animation trigger state|state=],
-determines the [=animation trigger|trigger=]'s effect on its
-associated [=animation=]'s playback.
+For [=timeline-based animation triggers=], the {{AnimationTrigger/behavior}} attribute
+combines with [=did trigger=] and [=animation trigger state|state=] to determine
+the effect on playback.
 
 The [=animation effect=] associated with an [=animation trigger=]
 in the [=animation trigger state/idle=] state
@@ -2460,13 +2516,14 @@ given values of behavior:
 
 Issue: Do we need a proper definition for "behavior types primary/inverse"?
 
-### Animation Trigger Active Interval ### {#trigger-active-interval}
+#### Timeline-Based Animation Trigger Active Interval #### {#trigger-active-interval}
 
-Each [=animation trigger=] defines an active interval
+Each [=timeline-based 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 [=animation trigger state/primary=].
 
-### Animation Trigger Ranges ### {#trigger-ranges}
+#### Timeline-Based Animation Trigger Ranges #### {#trigger-ranges}
 
 An [=animation trigger=] has two [=animation attachment range|ranges=],
 the default range and the exit range.
@@ -2476,58 +2533,28 @@ the [=animation trigger/active interval|active interval=].
 Issue: Should we specify that that exit range’s edges can only be equal to or greater than the default range’s edges?
 
 Depending on its most recent [=animation trigger state|state=] |state|, the
-[=animation trigger/active interval|active interval=] is defined as follows:
+[=animation trigger/active interval=] is defined as follows:
 
 

   : If |state| is [=animation trigger state/primary=],
   ::
-    Then |interval| is set to [=exit range=].
+    Then the [=active interval=] is [=exit range=].
 
   : Otherwise,
   ::
-    |interval| is [=default range=].
+    The [=active interval=] is [=default range=].
 
 

 
-### Setting a Trigger of an Animation ### {#setting-animation-trigger}
-
-  

-    The procedure of setting a trigger of an animation |animation|,
-    to |new trigger|, is as follows:
-
-    1. Let |old trigger| be the current [=animation trigger=] of |animation|, if any.
-
-    1. If |new trigger| is the same object as |old trigger|, abort this procedure.
-
-    1. Let the [=animation trigger|trigger=] of |animation| be |new trigger|.
-
-    1. Run the procedure to [=updating animation trigger state=] for |new trigger|.
-  

-
-### 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 value of |trigger|.{{AnimationTrigger/timeline}}, if any.
-
-    1. If |new timeline| is the same object as |old timeline|, abort this procedure.
-
-    1. Set |trigger|.{{AnimationTrigger/timeline}} to |new timeline|.
-
-    1. Run the [=updating animation trigger state=] procedure for |trigger|.
-  

-
-### Updating Animation Trigger State ### {#updating-trigger-state}
+#### Updating Timeline-Based Animation Trigger State #### {#updating-trigger-state}
 
 

   The procedure of updating animation trigger state
-  of an [=animation trigger=] |trigger| is as follows:
+  of a [=timeline-based animation trigger=] |trigger| is as follows:
 
   1. Let |did trigger| be the current value of |trigger|'s [=did trigger=] flag.
 
-  1. Let |behavior| be |trigger|'s associated [=animation trigger behavior=].
+  1. Let |behavior| be |trigger|'s {{AnimationTrigger/behavior}} attribute.
 
   1. Set |trigger|.[=animation trigger state|state=] as follows:
     

@@ -2572,6 +2599,40 @@ Depending on its most recent [=animation trigger state|state=] |state|, the
 
 Issue: Should it be the correct/expected behavior for the "did trigger" flag to reset to false if the timeline becomes idle again?
 
+### Setting a Trigger of an Animation ### {#setting-animation-trigger}
+
+  

+    The procedure of setting a trigger of an animation |animation|,
+    to |new trigger|, is as follows:
+
+    1. Let |old trigger| be the current [=animation trigger=] of |animation|, if any.
+
+    1. If |new trigger| is the same object as |old trigger|, abort this procedure.
+
+    1. Let the [=animation trigger|trigger=] of |animation| be |new trigger|.
+
+    1. If |new trigger| is a [=timeline-based animation trigger=],
+         run the [=updating animation trigger state=] procedure for |new trigger|.
+  

+
+### Setting the timeline of a Timeline-Based 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. If |trigger| is not a [=timeline-based animation trigger=]
+         throw a TypeError.
+
+    1. Let |old timeline| be the current value of |trigger|.{{AnimationTrigger/timeline}}, if any.
+
+    1. If |new timeline| is the same object as |old timeline|, abort this procedure.
+
+    1. Set |trigger|.{{AnimationTrigger/timeline}} to |new timeline|.
+
+    1. Run the [=updating animation trigger state=] procedure for |trigger|.
+  

+
 
 
 
Programming interface

@@ -3622,8 +3683,10 @@ Update the type for the AnimationPlaybackEventInit members.
 [Exposed=Window]
 interface AnimationTrigger {
   constructor(optional AnimationTriggerOptions options = {});
-  attribute AnimationTimeline timeline;
   attribute AnimationTriggerBehavior behavior;
+  attribute EventTarget? eventTarget;
+  attribute DOMString? eventType;
+  attribute AnimationTimeline? timeline;
   attribute any rangeStart;
   attribute any rangeEnd;
   attribute any exitRangeStart;
@@ -3631,31 +3694,51 @@ interface AnimationTrigger {
 };
+Issue: Should not use type `any` for the range attributes. +
: AnimationTrigger(|options|) :: Creates a new {{AnimationTrigger}} object using the following procedure: - 1. Create a new {{AnimationTrigger}} object, |trigger|. + 1. If |options| contains a {{AnimationTriggerOptions/timeline}} entry + and also contains either or both of + {{AnimationTriggerOptions/eventTarget}} and {{AnimationTriggerOptions/eventType}} + throw a TypeError. - 1. Set |trigger|.[=did trigger=] to false. + 1. If |options| contains only one of + {{AnimationTriggerOptions/eventTarget}} and {{AnimationTriggerOptions/eventType}} + throw a TypeError. - 1. Set |trigger|.[=animation trigger state|state=] to [=animation trigger state/idle=]. + 1. Create a new {{AnimationTrigger}} object, |trigger|. 1. Set |trigger|.{{AnimationTrigger/behavior}} to |options|.{{AnimationTriggerOptions/behavior}}. - 1. Set [=default range=] of |trigger| using |options|.{{AnimationTriggerOptions/rangeStart}} and |options|.{{AnimationTriggerOptions/rangeEnd}}, - following the same rules as the KeyframeAnimationOption - rangeStart and - rangeEnd respectively. + 1. If |options| contains a {{AnimationTriggerOptions/timeline}} entry + 1. Set |trigger|.[=did trigger=] to false. - 1. Set [=exit range=] of |trigger| using |options|.{{AnimationTriggerOptions/exitRangeStart}} and |options|.{{AnimationTriggerOptions/exitRangeEnd}}, - following the same rules above for [=default range=], unless they are set to - "auto", in which case they are set to their corresponding side - of the [=default range=]. + 1. Set |trigger|.[=animation trigger state|state=] to [=animation trigger state/idle=]. - 1. Run the procedure for [=setting timeline of animation trigger=] - on |trigger| passing |options|.{{AnimationTriggerOptions/timeline}} as the new timeline. + 1. Set [=default range=] of |trigger| using + |options|.{{AnimationTriggerOptions/rangeStart}} and |options|.{{AnimationTriggerOptions/rangeEnd}} + following the same rules as the KeyframeAnimationOption + rangeStart and + rangeEnd respectively. + + 1. Set [=exit range=] of |trigger| using |options|.{{AnimationTriggerOptions/exitRangeStart}} and |options|.{{AnimationTriggerOptions/exitRangeEnd}}, + following the same rules above for [=default range=], unless they are set to + "auto", in which case they are set to their corresponding side + of the [=default range=]. + + 1. Run the procedure for [=setting timeline of animation trigger=] + on |trigger| passing |options|.{{AnimationTriggerOptions/timeline}} + as the new timeline. + + 1. If |options| contains {{AnimationTriggerOptions/eventTarget}} and + {{AnimationTriggerOptions/eventType}} entries + 1. Set |trigger|.{{AnimationTrigger/eventTarget}} to |options|.{{AnimationTriggerOptions/eventTarget}}. + + 1. Set |trigger|.{{AnimationTrigger/eventType}} to |options|.{{AnimationTriggerOptions/eventType}}.
@@ -3670,15 +3753,26 @@ interface AnimationTrigger {
+ : behavior + :: + + : eventTarget + :: + For an [=event-based animation trigger=], this is + matched against a dispatched event's {{Event/target}} + to determine whether it's a [=animation trigger/qualifying event=]. + + : eventType + :: + For an [=event-based animation trigger=], this is + matched against a dispatched event's {{Event/type}} + to determine whether it's a [=animation trigger/qualifying event=]. + : timeline :: Returns the [=timeline=] for this trigger or `null` if this timeline is [=inactive timeline|inactive=]. - : behavior - :: - Returns the [=animation trigger behavior|behavior=] of this trigger. - : rangeStart :: Returns the [=default range=]’s start of this trigger. @@ -3695,14 +3789,18 @@ interface AnimationTrigger { :: Returns the [=exit range=]’s end of this trigger. +Issue: Need to specify the behavior of setters. +

The AnimationTriggerOptions dictionary

 dictionary AnimationTriggerOptions {
+  AnimationTriggerBehavior behavior = "once";
+  EventTarget? eventTarget;
+  DOMString? eventType;
   AnimationTimeline? timeline;
-  AnimationTriggerBehavior? behavior = "once";
   (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeStart = "normal";
   (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeEnd = "normal";
   (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) exitRangeStart = "auto";
@@ -3713,16 +3811,24 @@ dictionary AnimationTriggerOptions {
 

 
-  : timeline
-  ::
-      The timeline to which the trigger is associated.
-      If not specified, the trigger is associated with [=default document timeline=].
-
   : behavior
   ::
       The behavior of the trigger.
       If not specified, the trigger's behavior is ''animation-trigger-type/once''.
 
+  : eventTarget
+  ::
+      The {{EventTarget!!interface}} for an [=event-based animation trigger=].
+
+  : eventType
+  ::
+      The {{Event/type}} for an [=event-based animation trigger=].
+
+  : timeline
+  ::
+      The timeline to which a [=timeline-based animation trigger=] is associated.
+      If not specified, the trigger is associated with [=default document timeline=].
+
   : rangeStart
   ::
       The start of the trigger’s [=default range=].