<div class="animatable-element supersonic-element">
  I'm an animatable element, start scrolling to see me animating<br />
  My animation.currentTime is set manually
</div>

<div class="animatable-element-2 supersonic-element">
  I'm an animatable element, start scrolling to see me animating<br />
  I am rendering as usual
</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,
.animatable-element-2 {
  position: fixed;
  left: 18px;
  top: 50%;
  z-index: 10;

  animation-name: animation;
  animation-duration: 10s; /* This is required */
  animation-play-state: paused; /* This is required, playback is controlled by plugin */
  animation-timing-function: linear; /* This is recommended so that your animation will be consistent */
  animation-fill-mode: forwards; /* This is recommended so that your animation holds last frame on finish */
}

.animatable-element-2 {
  left: auto;
  right: 18px;
}

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

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

new TheSupersonicPlugin({
  drivers: {
    basic: {
      start: document.querySelector(".start"),
      end: document.querySelector(".end"),
      elements: [
        {
          selector: ".animatable-element",
          animations: [
            {
              name: "animation",
              hooks: {
                onBeforeRender({ animation }) {
                  return animation.driver.progress * 5000; // You can return a number from this hook so it will be used as 'animation.currentTime' value. Default is animation.driver.progress * 10000
                }
              }
            }
          ]
        },
        ".animatable-element-2"
      ]
    }
  }
});