<div class="animatable-element supersonic-element">
  I'm an animatable element, start scrolling to see me animating<br />
  My opacity is animated on scroll, but scale is not
</div>

<div class="start supersonic-driver">
  I'm a driver, I start an animation when I appear
</div>

<div class="end supersonic-driver">
  I'm a driver, I finish an animation when I appear
</div>

.start {
  position: absolute;
  top: 100vh;
}

.end {
  position: absolute;
  top: 200vh;
}

.animatable-element {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 10;
  translate: -50% 0 0;

  animation-name: animationControlledByScript, animationNotControlled;
  animation-duration: 10s, 1s;
  animation-play-state: paused, running;
  animation-timing-function: linear, ease;
  animation-fill-mode: forwards;
  animation-iteration-count: 1, Infinite;
  animation-direction: normal, alternate;
}

@keyframes animationControlledByScript {
  to {
    opacity: 0;
  }
}

@keyframes animationNotControlled {
  to {
    scale: 1.5;
  }
}

import { TheSupersonicPlugin } from "https://esm.sh/the-supersonic-plugin-for-scroll-based-animation@2.1.0";

new TheSupersonicPlugin([
  {
    start: document.querySelector(".start"),
    end: document.querySelector(".end"),
    elements: [
      {
        selector: ".animatable-element",
        animations: ["animationControlledByScript"]
      }
    ]
  }
]);