Q45: How does timeline-scope coordinate scroll animations across disconnected elements?
timeline-scope allows exposing scroll timeline references defined on child or sibling scroll containers up to a shared parent scope. This lets external header elements or indicators animate in response to scroll movements occurring inside an isolated sub-container.
Hoisting Scroll Timelines
.parent-scope {
timeline-scope: --sub-scroll;
}
.child-scroll-box {
scroll-timeline-name: --sub-scroll;
}
.external-indicator {
animation-timeline: --sub-scroll;
}💡 timeline-scope connects the external indicator's animation directly to the child scroll box's scroll timeline.
Key Takeaways
- Hoists scroll timeline references up to shared ancestor scopes.
- Coordinates scroll-driven animations across decoupled DOM elements.
Knowledge Check
What is the primary function of the timeline-scope CSS property?