08 / Scroll-driven

Timeline Scope

A figure far down the panel drives the bar at the top of it. One element's passage moves something it sits nowhere near.

also called timeline-scope · remote timeline · cross-tree driving

A scroll timeline is normally visible only to the element's own descendants. timeline-scope lifts it onto a shared ancestor, so a bar at the top can be driven by a figure far below it — something that previously required JavaScript by definition.

How it is built

timeline-scope: --plate; /* on a child */ view-timeline-name: --plate; /* on a sibling */ animation-timeline: --plate;