Skip to content

[css-animations-2] Move scroll and event animation triggers to independent namespace #12336

@flackr

Description

@flackr

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.

cc @szager-chromium @DavMila @birtles

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions