[css-animations-2] Specify the animation-trigger property #10128

ydaniv · 2024-03-25T08:52:09Z

Adding initial draft for Animation Triggers and the animation-trigger property as resolved in #8942 (comment).

I cleared all the issues and fleshed out the gist of it.

flackr

Thanks for getting this started! I think some of the low level details of how an animation trigger affects the animation probably belong in web-animations-1 with the css-animations spec setting properties by which you set up those triggers declaratively. You should also of course be able to set the same properties from the web-animations api.

flackr · 2024-04-05T19:58:31Z

css-animations-2/Overview.bs

@@ -690,7 +693,30 @@ The 'animation' shorthand property syntax is as follows:

 <span class=prod><dfn>&lt;single-animation></dfn> = <<'animation-duration'>> || <<easing-function>> || <<'animation-delay'>> || <<single-animation-iteration-count>> || <<single-animation-direction>> || <<single-animation-fill-mode>> || <<single-animation-play-state>> || [ none | <<keyframes-name>> ] || <<single-animation-timeline>></span>

+## The 'animation-trigger' property ## {#animation-trigger}


Any reason not to define this shorthand in the same section as the longhand properties it is a short-hand for?

I started with everything next to the short-hand, but later had to move more and properties close to the definition of Trigger below. I'll refactor it now anyway, to have the properties here, and the definitions in web-animaitons-1, as you said.

flackr · 2024-04-05T20:03:22Z

css-animations-2/Overview.bs

+An <dfn export>animation trigger</dfn> 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=].


This makes it sound like animation triggers are separate things from animations, but I suspect we should say that as a part of updating the current time of animations we evaluate whether a trigger condition has been reached and apply a stateful change to the animation.

Sounds good. I'll work on that

flackr · 2024-04-05T20:04:23Z

css-animations-2/Overview.bs

+[=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?


I suspect triggers on scroll-driven animations should "just work". E.g. they could play / stop the animation when the trigger condition occurs / finishes.

How does each type affects a scroll-driven animation?
Furthermore, what could be the actual use-case for this? Perhaps one that I can think of now is if we have a hover-timeline in the future and we want to enable/disable it on different scroll positions. Is that what you mean?

flackr · 2024-04-05T20:09:44Z

css-animations-2/Overview.bs

+  ::
+
+    <dl class=switch>
+      : If |effect| is inside its [=active interval=],


I think defining a trigger in terms of an internal animation effect's time might be overkill. E.g. I think we could define this simply in terms of the animation timeline's time with respect to the specified range

I struggled with that quite a bit. Eventually it worked out once I defined the same hierarchy as animations', and defined a special state for the effect. I'll try simplifying this further.

flackr · 2024-04-05T20:12:30Z

css-animations-2/Overview.bs

+
+Issue: Should there be any effect of triggers on scroll-driven animations?
+
+##  Animation Trigger Effects ## {#trigger-effects}


I think the internal control of how triggers work probably belongs in web-animations where we define things like how an updated time updates corresponding animations: https://drafts.csswg.org/web-animations-1/#update-animations-and-send-events

We should also be able to set up animation triggers from javascript.

OK, sure. We didn't discuss the WAAPI part of triggers in the issue, should I try fleshing that too in this PR? Or you're just stating this as a reason for this change?

birtles · 2024-04-16T06:16:16Z

@ydaniv Thanks for doing this. I started going through it today but I was a little confused about the hierarchy of components from the Web Animations API point-of-view. It sounds like we have the following parts:

Animation trigger timeline (currently a DocumentTimeline but possibly scroll-driven timelines too)
Animation trigger
Animation trigger effect
Animation

What is the relationship between them? Do the Animation trigger and Animation share an effect? Is the Animation trigger connected directory to the Animation trigger effect or only via the Animation? Is the Animation attached to the Animation trigger timeline or just the Animation trigger?

Sorry, I'm probably being really daft here but I couldn't grasp how the pieces fit together.

Defining some of these primitives as Web Animations constructs like @flackr suggested might help clarify how they fit together.

ydaniv · 2024-04-16T19:37:04Z

@birtles thanks for reviewing!

The intention of the hierarchy was mostly to simplify the spec, by having triggers follow animations as in:
For animations: timeline -> animation -> effect
For triggers: timeline -> trigger -> effect
And since effects are attached to attachment ranges, have trigger follow the same mechanism.

The idea was that they don't share anything, just follow the same structure, and the trigger simply affects the animation's playback according to its properties and state.

But, as @flackr mentioned, it's still too confusing and too complex, so I'll try and rewrite this without the effect part, and only with a trigger attached to a timeline and a range.

I've tried defining the constructs first in the initial draft. I'll move those into the Web Animations spec as suggested, and try to organize them together again in a simpler way.

birtles · 2024-04-17T05:37:21Z

The intention of the hierarchy was mostly to simplify the spec, by having triggers follow animations as in:
For animations: timeline -> animation -> effect
For triggers: timeline -> trigger -> effect
And since effects are attached to attachment ranges, have trigger follow the same mechanism.

The idea was that they don't share anything, just follow the same structure, and the trigger simply affects the animation's playback according to its properties and state.

Makes sense!

But, as @flackr mentioned, it's still too confusing and too complex, so I'll try and rewrite this without the effect part, and only with a trigger attached to a timeline and a range.

Ok, I'll look forward to seeing what you come up with!

Removed dfn of animation trigger effect

ydaniv · 2024-04-17T11:21:29Z

@flackr @birtles I've just pushed changes, I think I've covered all the comments, thanks!

birtles · 2024-04-18T01:31:48Z

web-animations-1/Overview.bs

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


I still don't quite get the hierarchy here. This suggests an animation effect is associated with a trigger but previous we said a trigger is associated with an animation. Which is it?

Right, the relation here should be indirect via the animation. The trigger is associated to the animation. The required behavior of the animation is to "hold its effect in a 'just before playing' state". I'll try to fix that.

Done, I think it's better now.

[css-animations-2] Specify the animation-trigger property

133f6e0

ydaniv added the css-animations-2 label Mar 25, 2024

ydaniv requested review from flackr and birtles March 25, 2024 09:09

ydaniv added 3 commits March 26, 2024 00:23

Fixed syntax of single-animation-trigger + some link fixes

f3a49ba

More fixes to links and defs

cbd4f07

More fixes to links and defs

9f6464a

ydaniv marked this pull request as ready for review March 28, 2024 11:57

flackr reviewed Apr 5, 2024

View reviewed changes

Move all definitions to web-animations-1;

912426a

Removed dfn of animation trigger effect

birtles reviewed Apr 18, 2024

View reviewed changes

Fixed idle state definition for animation trigger state

9ae1a13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[css-animations-2] Specify the animation-trigger property #10128

[css-animations-2] Specify the animation-trigger property #10128

ydaniv commented Mar 25, 2024 •

edited

flackr left a comment

flackr Apr 5, 2024

ydaniv Apr 6, 2024

flackr Apr 5, 2024

ydaniv Apr 6, 2024

flackr Apr 5, 2024

ydaniv Apr 6, 2024

flackr Apr 5, 2024

ydaniv Apr 6, 2024

flackr Apr 5, 2024

ydaniv Apr 6, 2024

birtles commented Apr 16, 2024

ydaniv commented Apr 16, 2024

birtles commented Apr 17, 2024

ydaniv commented Apr 17, 2024

birtles Apr 18, 2024

ydaniv Apr 18, 2024

ydaniv Apr 18, 2024

		@@ -690,7 +693,30 @@ The 'animation' shorthand property syntax is as follows:

		<span class=prod><dfn><single-animation></dfn> = <<'animation-duration'>> \|\| <<easing-function>> \|\| <<'animation-delay'>> \|\| <<single-animation-iteration-count>> \|\| <<single-animation-direction>> \|\| <<single-animation-fill-mode>> \|\| <<single-animation-play-state>> \|\| [ none \| <<keyframes-name>> ] \|\| <<single-animation-timeline>></span>

		## The 'animation-trigger' property ## {#animation-trigger}


		Issue: Should there be any effect of triggers on scroll-driven animations?

		## Animation Trigger Effects ## {#trigger-effects}

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

[css-animations-2] Specify the animation-trigger property #10128

Are you sure you want to change the base?

[css-animations-2] Specify the animation-trigger property #10128

Conversation

ydaniv commented Mar 25, 2024 • edited

flackr left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

birtles commented Apr 16, 2024

ydaniv commented Apr 16, 2024

birtles commented Apr 17, 2024

ydaniv commented Apr 17, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ydaniv commented Mar 25, 2024 •

edited