In this example, a scroll progress timeline named --myScroller is defined using the scroll-timeline-name property on the :root element (<html>). This timeline is then applied to the animation on the element with the animation class using animation-timeline: --myScroller.
To demonstrate the effect of scroll-timeline-axis, a horizontal (non-default) scrollbar is used in this example to drive the animation.
HTML
The HTML for the example is shown below.
<body>
<div class="content"></div>
<div class="box animation"></div>
</body>
CSS
The CSS for the container sets the :root as the source of a scroll progress timeline named --myScroller using the scroll-timeline-name property. The scroll axis is set using scroll-timeline-axis: x; (Chromium) and scroll-timeline-axis: horizontal; (Firefox) — this causes the horizontal scrollbar position to determine the animation timeline.
The width of the .content element is set to a large value to make it overflow the :root element.
Also worth noting is that the .animation element has the timeline applied to it using animation-timeline: --myScroller;, and it also has an animation-duration applied to it so that the example will work in Firefox.
:root {
scroll-timeline-name: --myScroller;
/* Chromium supports the new x/y syntax */
scroll-timeline-axis: x;
/* Firefox still supports the old horizontal/vertical syntax */
scroll-timeline-axis: horizontal;
}
body {
margin: 0;
overflow-y: hidden;
}
.content {
height: 100vh;
width: 2000px;
}
.box {
width: 100px;
height: 100px;
border-radius: 10px;
background-color: rebeccapurple;
position: fixed;
top: 25px;
left: 25px;
}
.animation {
animation: rotate-appear;
animation-timeline: --myScroller;
animation-duration: 1ms; /* Firefox requires this to apply the animation */
}
@keyframes rotate-appear {
from {
rotate: 0deg;
top: 0%;
}
to {
rotate: 720deg;
top: 100%;
}
}
Result
Scroll the horizontal bar at the bottom to see the square animate as you scroll.