<div class="animatable-element supersonic-element">
  I'm an animatable element, start scrolling to see me animating<br />
  The whole animation will be stopped after 10 seconds, but instance will still be alive and running, so animation can run again after 10 seconds
</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: 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 */
}

@keyframes animation {
  to {
    scale: 1.5;
    opacity: 0;
    rotate: 180deg;
  }
}

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

const plugin = new TheSupersonicPlugin(
  [
    {
      start: document.querySelector(".start"),
      end: document.querySelector(".end"),
      elements: [".animatable-element"]
    }
  ],
  {
    hooks: {
      onBeforeRender() {
        // This example is for educational purpose only. If you want to disable all animations, it's better to call 'uninit()', see next example
        if (performance.now() > 10000 && performance.now() < 20000)
          return false;
      }
    }
  }
);

setTimeout(() => {
  plugin.render({ useActiveDrivers: true });
}, 20100);