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 -->