scroll-timeline-name
Assigns a custom name to a scroll timeline, allowing it to be referenced by the animation-timeline property on other elements.
It is documented as part of the Scroll-driven Animations specification.
Syntax
/* Usage 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;
}
/* Syntax */
scroll-timeline-name: none;
/* Global values */
scroll-timeline-name: inherit;
scroll-timeline-name: initial;
scroll-timeline-name: revert;
scroll-timeline-name: revert-layer;
scroll-timeline-name: unset;scroll-timeline-name Browser support
Limited availability
Since
2020 80% global usage
This feature is not Baseline because it does not work in some of the most widely-used browsers.
115+
114+
115+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more