<div class="animatable-element supersonic-element">
  I'm an animatable element, start scrolling to see me animating<br />
  My transition is custom
</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";

new TheSupersonicPlugin([
  {
    start: ".start",
    end: ".end",
    elements: [".animatable-element"],
    hooks: {
      onAfterInit(driver) {
        driver.data.easedProgress = 0; // you can use "data" to store your custom data and allow hooks to communicate
      },
      onBeforeRender(driver) {
        let delta = (driver.progress - driver.data.easedProgress) * 0.025;

        if (Math.abs(delta) > 0.0001)
          driver.progress = driver.data.easedProgress += delta;
      },
      onUpdateLimits(driver) {
        const top = driver.start.top + driver.plugin.screenHeight;
        driver.helper.updateLimits({
          top,
          height: driver.end.top - top + driver.plugin.screenHeight
        }); // We need to make it, because when 'end' appears on the screen, driver stops animating, but we want animation to play till the end, so we expand the bottom line of the helper
      }
    }
  }
]);