This example shows a square, which rotates as its container is scrolled vertically. We create an element (#container
) with a fixed height to allow scroll. This is our source
element.
Inside this container, we create another element (#square
), which is styled appropriately to look like a square. This element has a rotation animation applied, using the @keyframes
rule and animation-name
property.
We create an @scroll-timeline
called squareTimeline
, setting the source
as the container, the orientation
as vertical
and the scroll-offset
to start at 0px
and end at 300px
(the height of our container). Then we apply this to the square using the scroll-timeline
property.
HTML
<div id="container">
<div id="square"></div>
</div>
CSS
#container {
height: 300px;
}
#square {
background-color: deeppink;
width: 100px;
height: 100px;
margin-top: 100px;
animation-name: rotateAnimation;
animation-duration: 3s;
animation-direction: alternate;
animation-timeline: squareTimeline;
}
@scroll-timeline squareTimeline {
source: selector("#container");
orientation: "vertical";
scroll-offsets: 0px, 300px;
}
@keyframes rotateAnimation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Result