【Javascript：GSAP】動画再生とスクロールを連動させる方法

やりたいこと

画面を固定し、スクロールに応じて動画が再生され、動画が完了しないと次のセクションには進めないようにする

 

準備

必要なライブラリ

今回使用するライブラリは以下の2つです

• GSAP: アニメーションライブラリ
• ScrollTrigger: GSAPプラグインで、スクロール操作に基づいたアニメーションを実現します

HTMLに以下スクリプトを設置します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>

 

実装方法

1.HTML

スクロールに応じて動画を再生するセクションを設定します。

<div id="container01" class="video-container">
  <video class="video-background" muted playsinline preload="auto">
    <source src="/movie/01.mp4" type="video/mp4" />
  </video>
</div>

CSSを使用して、動画セクションをレイアウトします。
※装飾のCSSは省略しています

.section-effects__container {
  height: 600vh; /* スクロール量 */
  position: relative;
}

.video-container {
  position: sticky;
  top: 151px;
  width: 100%;
  height: calc(100vh - 151px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.section-effects__video-wrapper,
.video-background {
  width: 100%;
  max-height: 600px;
}

 

3. JavaScriptでScrollTriggerを設定

GSAPとScrollTriggerを使用して背景がスクロール時に固定されるように設定します。

document.addEventListener("DOMContentLoaded", () => {
  gsap.registerPlugin(ScrollTrigger);

  const videos = document.querySelectorAll(".video-background");

  videos.forEach((video, index) => {
    video.addEventListener("loadedmetadata", () => {
      ScrollTrigger.create({
        trigger: `#container01`, // 動画セクションのトリガー
        start: "top center", // スクロール開始位置
        end: "bottom center", // スクロール終了位置
        scrub: true, // スクロールと連動
        onUpdate: (self) => {
          const progress = self.progress; // スクロール進行度
          video.currentTime = progress * video.duration; // 動画の再生位置を同期
        },
      });
    });
  });
});

 

ポイント

• trigger：アニメーションのトリガーとなる要素。
  ここでは動画セクション（#container01を指定。
• startとend：スクロール範囲を指定。
• start: “top center”：トリガーの上端が画面の中央に達したとき。
• end: “bottom center”：トリガーの下端が画面の中央に達したとき。
• scrub：スクロールとアニメーションを同期させるオプション。trueを指定するとスクロールの進行に応じてアニメーションが進行します。
• onUpdate：スクロールイベントの進行状況（self.progress）を取得し、それに基づいて動画の再生位置を計算します。

※markers: true,にするとマーカーが表示され理解しやすいです！
 

 

• WEB
• 技術情報