Scroll Timeline Animation

This horizontal scroll animation triggers when elements enter the viewport and reverses when they exit.

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;
  }
}