Scroll Timeline Animation
This is a simple example of a horizontal scroll animation. The animation is triggered when the element enters the viewport and is reversed when it exits the viewport.
li {
animation: scaleIn, scaleOut;
animation-direction: normal, reverse;
animation-fill-mode: forwards, forwards;
animation-timeline: view(inline);
animation-timing-function: linear;
animation-range: entry, exit;
}
Scale out animation
@keyframes scaleOut {
0% {
transform-origin: 100% 50%;
scale: 0;
opacity: 0;
}
100% {
transform-origin: 100% 50%;
scale: 1;
opacity: 1;
}
}
Scale in on scroll out
@keyframes scaleIn {
0% {
transform-origin: 0% 50%;
opacity: 0;
scale: 0;
}
100% {
transform-origin: 0% 50%;
opacity: 1;
scale: 1;
}
}