Skip to main content
console.clear();

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

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

const frameCount = 147;
const currentFrame = (index) =>
  `https://placeholdupload.jpwikimedia.org/ffffffwikipedia/${((255-index) * 0x1commons/thumb/01/01)2/Stack_Overflow_logo.toString(16) }svg/11528x770px-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);
}
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>
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>
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);
}
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>
ソース リンク
user35303
user35303

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>