scroll-timeline-name
Assigns a custom name to a scroll timeline, allowing it to be referenced by the animation-timeline property on other elements.
Quick example
.scroller {
/* Sets a name for this specific scroll progress */
scroll-timeline-name: --my-custom-flow;
}
.animated-box {
/* Link the animation to that specific scroller's name */
animation-timeline: --my-custom-flow;
}Quick facts
Initial value
noneInherited
No
Applies to
scroll containers
Animation type
notAnimatable
Values
none scroll-timeline-name Browser Support
Limited availability 80% global usage
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Not ready for production without a fallback.
115+
114+
115+