<canvas id="hero-lightpass"></canvas>

<div class="start"></div>
<div class="end"></div>

html {
  height: 100vh;
}

body {
  height: 5000px;
  background: #000;
  position: relative;
}

canvas {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 100vw;
  max-height: 100vh;
}

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

.end {
  position: absolute;
  bottom: 10px;
}

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

const canvas = document.getElementById("hero-lightpass");
const context = canvas.getContext("2d");

canvas.width = 1158;
canvas.height = 770;

const frameCount = 147;
const currentFrame = (index) =>
  `https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/01-hero-lightpass/${(
    index + 1
  )
    .toString()
    .padStart(4, "0")}.jpg`;

const images = [];
const airpods = {
  frame: 0
};

for (let i = 0; i < frameCount; i++) {
  const img = new Image();
  img.src = currentFrame(i);
  images.push(img);
}

new TheSupersonicPlugin([
  {
    start: ".start",
    end: ".end",
    hooks: {
      onBeforeRender(driver) {
        airpods.frame = Math.ceil((frameCount - 1) * driver.progress);

        render();
      }
    }
  }
]);

images[0].onload = render;

function render() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(images[airpods.frame], 0, 0);
}