scroll-timeline
Links an animation's progress directly to the scroll position of a scroll container. This replaces time-based durations with scroll-based progress.
It is documented as part of the Scroll-driven Animations specification.
Syntax
/* Usage Example */
.container {
/* Shorthand for name and axis */
scroll-timeline: --page-scroll block;
}
.progress-bar{
animation: fill-stripe linear;
animation-timeline: --page-scroll;
}
/* Syntax */
scroll-timeline: scroll-timeline-name;
scroll-timeline: scroll-timeline-axis;
/* Global values */
scroll-timeline: inherit;
scroll-timeline: initial;
scroll-timeline: revert;
scroll-timeline: revert-layer;
scroll-timeline: unset;scroll-timeline 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+
111+
115+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more