v146 · CSS · Animations

trigger-scope

Chrome 146 adds the trigger-scope CSS property, which lets authors limit the names of animation triggers declared by trigger-instantiating properties. When set, only triggers within the scoped subtree are visible to animation-trigger lookups, preventing name collisions between components.

concepts

  1. Trigger Scope Demo

    Two components each declare a trigger with the same name. With trigger-scope, each component's animation-trigger resolves to its own local trigger — demonstrating scope isolation between components.

  2. Scope Isolation Demo

    Shows without and with trigger-scope: without scoping, a trigger name leaks outside the component boundary. With scoping, names are contained. Side-by-side comparison with live animations.

  3. Dual scroller explorer

    Two side-by-side components share a trigger name. Toggle scoped vs global, scroll the left panel, and watch whether the right panel's items mirror or stay still.

  4. Component Scope Inspector

    Three nested components each declare their own trigger scope. Click any Open button and watch the event log — a scoped trigger only activates popovers within the same scope boundary, preventing cross-component side effects.

why it shipped

CSS scroll-driven and view-driven animation triggers can be given names via timeline-trigger and referenced by animation-trigger. In a page with multiple reusable components — each defining triggers — trigger names from one component can accidentally match and affect another. trigger-scope works like timeline-scope for scroll timelines: it limits the lookup boundary so names don't escape a component's subtree.

the API

/* Without trigger-scope: trigger names are globally scoped */
.component {
  timeline-trigger: --my-trigger;  /* visible anywhere on the page */
}
.other-component [data-animated] {
  animation-trigger: --my-trigger; /* accidentally picks up .component's trigger */
}

/* With trigger-scope: names are scoped to the element's subtree */
.component {
  trigger-scope: --my-trigger;     /* limit this name to descendants only */
  timeline-trigger: --my-trigger;
}
.other-component [data-animated] {
  animation-trigger: --my-trigger; /* resolves to .other-component's own trigger */
}

references