image タグを作ってるのは
img.src = currentFrame(i);
なので
const currentFrame = (index) =>
が返す画像URLを変えればいいかと
console.clear();
const canvas = document.getElementById("hero-lightpass");
const context = canvas.getContext("2d");
canvas.width = 1158;
canvas.height = 770;
const frameCount = 147;
const currentFrame = (index) =>
`https://placehold.jp/ffffff/${((255-index) * 0x10101).toString(16) }/1158x770.png`;
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);
}
html {
height: 100vh;
}
body {
background: #000;
}
canvas {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
max-height: 100vh;
}
<!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>