In this example, a scroll timeline named squareTimeline is defined using the scroll-timeline-name property on the element with the ID container, and then this name is applied to the animation on the #square element using animation-timeline: squareTimeline.
To demonstrate the effect of scroll-timeline-axis, a horizontal (non-default) scrollbar is used in this example to drive the rotation of the square.
HTML
The HTML for the example is shown below.
<div id="container">
<div id="square"></div>
<div id="stretcher"></div>
</div>
CSS
The CSS for the container sets it as the source of a scroll timeline named squareTimeline using the scroll-timeline-name property. The scroll axis is set by scroll-timeline-axis: horizontal; so that the horizontal scrollbar position will determine the animation timeline.
The height and width of the container are set to 200px. The container is also set to create scrollbars if it overflows (the CSS height and width rules on the stretcher element below make the content overflow its container).
#container {
height: 200px;
width: 200px;
overflow: scroll;
scroll-timeline-name: squareTimeline;
scroll-timeline-axis: horizontal;
}
The CSS below defines a square that rotates according to the timeline provided by the animation-timeline property, which is set to the squareTimeline timeline named above.
#square {
background-color: deeppink;
width: 100px;
height: 100px;
margin-top: 100px;
animation-name: rotateAnimation;
animation-duration: 1ms;
animation-timeline: squareTimeline;
position: absolute;
bottom: 50px;
}
#stretcher {
height: 200px;
width: 200px;
background: #dedede;
}
@keyframes rotateAnimation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
The stretcher CSS rule sets the block height and width to values large enough to create content that overflows the container element, thereby creating scroll bars. Without this element, the content would not overflow the container, there would be no scrollbar, and hence no scroll timeline to associate with the animation timeline.
Result
Scroll the horizontal bar at the bottom to see the square animate as you scroll.