-
Notifications
You must be signed in to change notification settings - Fork 731
Description
As we're adding more features or types to animation triggers #12314 and as we've mostly decided that triggers should be an independent thing controlling the playback of an animation #12119, I think that we should create triggers in a similar way to view or scroll timelines.
The current spec https://drafts.csswg.org/css-animations-2/#animation-triggers lists some of the trigger related properties and more are being added for event triggers.
TLDR; I propose we have new prefixes that independent from the animation-*
longhands for creating named triggers (following pattern of timelines), e.g. timeline-trigger-*
combined with a dashed-ident name that can be referenced from the animation-trigger property on an animation (similar to referencing an animation-timeline).
As we're adding all of these features, they each come with a long set of properties. We also expect for event triggers that the source of the events may be on a completely different element. As such, I think these should be set up in a manner similar to view or scroll timelines and referenced from the animations which want to associate with them.
We can of course also have a convenience function for creating anonymous triggers directly from the animation-trigger
property but I think it may be confusing and inconvenient to add a bunch of animation-trigger-*
longhand properties when triggers, like timelines, are not inherently associated with or part of the definition of an animation and which properties they have depends on the type of trigger.
#12336 (comment) has a good breakout of what all of these properties might look like.
Rough idea, animation-trigger would be a coordinated list similar to animation-timeline specifying either a named trigger or an anonymous trigger construction, e.g.
animation-trigger:
[ <dashed-ident> |
timeline(<behavior> <timeline-reference> <entry range> <exit range>) |
event(<event list>) ]#
The longhands in https://drafts.csswg.org/css-animations-2/#animation-triggers would be changed to set up a named trigger, e.g. timeline-trigger-*
, with an additional timeline-trigger-name
to set the dashed-ident name that can be referenced from animation-trigger
.