v146 · CSS · Trigger Scope Demo

Trigger Scope Demo

Two components each declare a trigger named --card-trigger using timeline-trigger. Both components set trigger-scope: --card-trigger so each trigger name is contained within its own component subtree. Clicking the trigger zone in each component only activates that component's animation.

trigger-scope works like timeline-scope — it restricts the lookup of a named trigger to the subtree of the element that declares the scope. Without it, both components would share the first --card-trigger found on the page.

two scoped components

Component A (trigger-scope: --card-trigger)

Click here — timeline-trigger: --card-trigger
animation-trigger: --card-trigger → local only
trigger-scope: --card-trigger

Component B (trigger-scope: --card-trigger)

Click here — timeline-trigger: --card-trigger
animation-trigger: --card-trigger → local only
trigger-scope: --card-trigger

What's happening

Both components declare trigger-scope: --card-trigger on the wrapper element. This means the trigger name --card-trigger is scoped to each wrapper's subtree independently. Triggering Component A does not affect Component B even though they use the same trigger name.

code

/* Both components use the same trigger name — no collision */
.component {
  /* Scope the name: resolves within this subtree only */
  trigger-scope: --card-trigger;

  /* Declare the trigger on an element inside the component */
  .trigger-zone {
    timeline-trigger: --card-trigger;
  }

  /* Attach animation in the same component */
  .animated-box {
    animation-name: highlight-pulse;
    animation-trigger: --card-trigger;  /* finds the scoped trigger */
    animation-duration: 0.5s;
    animation-fill-mode: both;
  }
}

/* Second component — same names, completely isolated */
.component:nth-child(2) {
  trigger-scope: --card-trigger;
  .trigger-zone { timeline-trigger: --card-trigger; }
  .animated-box {
    animation-name: highlight-emerald;
    animation-trigger: --card-trigger;  /* its own scoped trigger */
  }
}

see also