demo · v146

Dual scroller explorer

Two reusable components each declare a trigger called --reveal. Toggle trigger-scope on and off, scroll the left panel, and watch whether the right panel's items animate too (the leak) — or whether they correctly stay still (scoped).

Behind a flag: the trigger-scope CSS property ships behind chrome://flags/#enable-experimental-web-platform-features in Chrome 146. The simulator manually fires the animation under each policy so the comparison is visible.

policy

component A — scrolls

scroll ↓
A.0
A.1
A.2
A.3

component B — passive

scroll ↓ (independent)
B.0
B.1
B.2
B.3

see also