image タグを作ってるのは
`img.src = currentFrame(i);`
なので
`const currentFrame = (index) =>`
が返す画像URLを変えればいいかと


<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    console.clear();

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

    canvas.width = 1536;//画像の幅(水平方向)
    canvas.height = 300;//画像の高さ(垂直方向)

    const frameCount = 147;
    const currentFrame = (index) =>
      `https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Stack_Overflow_logo.svg/1280px-Stack_Overflow_logo.svg.png`;//任意の画像のURL

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

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

    const tweenPods = (targetFrame) => {
      gsap.to(airpods, {
        frame: targetFrame,
        duration: 3,
        snap: "frame",
        ease: "none",
        onUpdate: render,
        onComplete: () => (isAnimating = false)
      });
    };

    const previous = () => {
      const _activeFrame = airpods.frame;
      if (isAnimating || _activeFrame === 0) return;
      isAnimating = true;
      if (_activeFrame === 146) {
        return tweenPods(100);
      }
      if (_activeFrame === 100) {
        return tweenPods(40);
      }
      tweenPods(0);
    };
    const next = () => {
      const _activeFrame = airpods.frame;
      if (isAnimating || _activeFrame === frameCount) return;
      isAnimating = true;
      if (_activeFrame === 40) {
        return tweenPods(100);
      }
      if (_activeFrame === 100) {
        return tweenPods(146);
      }
      tweenPods(40);
    };

    Observer.create({
      target: "#hero-lightpass",
      type: "wheel",
      onUp: () => previous(),
      onDown: () => next()
    });

    images[0].onload = render;

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

<!-- language: lang-css -->

    html {
      height: 100vh;
    }

    body {
      background: #000;
    }

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

<!-- language: lang-html -->

    <!DOCTYPE html>
    <html lang="en" >
    <head>
      <meta charset="UTF-8">
      <title>CodePen - GSAP Observer AirPods Tween</title>
      <link rel="stylesheet" href="./style.css">

    </head>
    <body>
    <!-- partial:index.partial.html -->
    <canvas id="hero-lightpass" />
    <!-- partial -->
      <script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script>
    <script src='https://unpkg.com/gsap/dist/Observer.min.js'></script><script  src="./script.js"></script>

    </body>
    </html>

<!-- end snippet -->