Intent to Prototype & Ship: trigger-scope

[David Awogbemila]

Contact emails

awogb...@google.com

Explainer

https://github.com/explainers-by-googlers/scroll-triggered-animations/blob/main/TRIGGER_SCOPE.md

Specification

https://drafts.csswg.org/css-animations-2/#trigger-scope

Summary

trigger-scope gives authors the ability to limit the names of animation triggers declared by trigger-instantiating properties. Trigger-Instantiating properties, such as timeline-trigger, declare names which can be referenced by the animation-trigger property in order to attach animations to triggers. However, these names are global by default (similar to anchor-name) and it is often useful for author to limit the visibility of the names so as to isolate animation-to-trigger interactions.

Blink component

Blink>Animation

Web Feature ID

Missing feature

Motivation

Similar to anchor-scope[1], trigger-instantiating properties need a mechanism for limiting the visibility of the names declared by the trigger-instantiating property. [1] https://drafts.csswg.org/css-anchor-position-1/#anchor-scope

Initial public proposal

No information provided

TAG review

https://github.com/w3ctag/design-reviews/issues/1175

TAG review status

Pending

Risks

Interoperability and Compatibility

No information provided

Gecko: No signal (https://github.com/mozilla/standards-positions/issues/1327)

WebKit: No signal (https://github.com/WebKit/standards-positions/issues/589)

Web developers: No signals

Other signals:

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

No information provided

Debuggability

No information provided

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?

Yes

Is this feature fully tested by web-platform-tests?

Yes
https://wpt.fyi/results/?label=master&label=experimental&aligned&q=trigger-scope (As of this writing, only the parsing tests are present on the dashboard but functional tests[1] are quickly following) [1] https://github.com/web-platform-tests/wpt/pull/56601

Flag name on about://flags

No information provided

Finch feature name

No information provided

Non-finch justification

No information provided

Rollout plan

Will ship enabled for all users

Requires code in //chrome?

False

Tracking bug

https://crbug.com/466134208

Estimated milestones

Shipping on desktop	145
Shipping on Android	145
Shipping on WebView	145

Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

No information provided

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5152759609425920?gate=5794840308744192

This intent message was generated by Chrome Platform Status.

[Rick Byers]

Hey David,

This seems fairly straightforward to me, but I imagine there's probably some developer signals here, right? Somebody who has said why they want this?

Thanks,

   Rick

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAA6pwF59XSB2N2b1bx-26%2BJX2Feunn7Zv7s2aUvD6AkjqfTjmg%40mail.gmail.com.

[Bramus Van Damme]

On Wednesday, December 10, 2025 at 5:09:57 PM UTC+1 Rick Byers wrote:

Hey David,

This seems fairly straightforward to me, but I imagine there's probably some developer signals here, right? Somebody who has said why they want this?

Hi, it’s me! :)

This is needed when applying scroll-triggered animations that use selectors which match multiple elements. Without trigger-scope, the last element that declares the trigger would “win”, thereby breaking all other matched element that use the same name for its trigger. With trigger-scope, the name can be contained to a specific subtree, allowing name reuse.

See https://codepen.io/bramus/pen/dPMVoYR/2e5fd8b6a35cc77cfb8faf0f16caf1e3 (Canary with flags) for an example: each image animates individually, each with their own trigger-timeline named --t.

Without timeline-trigger scope, all images would animate using the timeline-trigger of the very last element – which is not what you want.

tl;dr Without trigger-scope, it would be near impossible for authors to properly implement scroll-triggered animations.

[Yoav Weiss (@Shopify)]

LGTM1

On Wednesday, December 10, 2025 at 8:02:23 PM UTC+1 Bramus Van Damme wrote:

On Wednesday, December 10, 2025 at 5:09:57 PM UTC+1 Rick Byers wrote:

Hey David,

This seems fairly straightforward to me, but I imagine there's probably some developer signals here, right? Somebody who has said why they want this?

Hi, it’s me! :)

This is needed when applying scroll-triggered animations that use selectors which match multiple elements. Without trigger-scope, the last element that declares the trigger would “win”, thereby breaking all other matched element that use the same name for its trigger. With trigger-scope, the name can be contained to a specific subtree, allowing name reuse.

See https://codepen.io/bramus/pen/dPMVoYR/2e5fd8b6a35cc77cfb8faf0f16caf1e3 (Canary with flags) for an example: each image animates individually, each with their own trigger-timeline named --t.

Without timeline-trigger scope, all images would animate using the timeline-trigger of the very last element – which is not what you want.

tl;dr Without trigger-scope, it would be near impossible for authors to properly implement scroll-triggered animations.

I'm hearing similar arguments from devs inside of Shopify.

[Mike Taylor]

LGTM2

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/452419c1-8b6c-4677-abe0-387ef9991a09n%40chromium.org.

[Mike Taylor]

Oh, it was just pointed out that the spec is essentially "TODO: spec this" (at least that's my read on the second Note).

https://drafts.csswg.org/css-animations-2/#trigger-scope

I'd prefer to rescind my LGTM until we at least have a spec PR up to actually define trigger-scope. Can you please prioritize that work?

[David Awogbemila]

Thanks for the feedback! happy to prioritize this; I've uploaded a PR.

[Mike Taylor]

Thanks for doing the spec work David. The feedback on the PR looks fairly minor and easily addressable, so LGTM2.

[Chris Harrelson]

LGTM3

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/68a49bb8-c004-49b1-9eaf-13ef7c6bff82%40chromium.org.