🔄 GSAP3 & ScrollTriggerでのコンテンツ遷移アニメーションの実装法💻

はじめに

今回の記事では、GSAP3とScrollTriggerを用いて、スクロールに合わせたコンテンツの遷移アニメーションをどのように実装するかを解説します。アニメーションは、画面全体を覆うセクションに配置された複数の「.box」要素が、スクロール進行に合わせて横に移動し、回転するという流れになっています。これにより、動きのあるインタラクティブなデザインを手軽に実現できます[1]。

See the Pen Untitled by Yushi Yamamoto (@yamamotoyushi) on CodePen.

---

HTMLの構造

今回のコードでは、HTMLの基本構造として以下のようなセクションが定義されています。

<section class="trigger">
  <span class="down">下<br />↓</span>
  <span class="up">↑<br />上</span>
  <div class="box"></div>
  <div class="box"></div>
  <!-- 複数の.box要素が並ぶ -->
  ...
</section>

• セクション要素（.trigger）
  このセクションは、アニメーションのトリガーとなる領域です。スクロール時にピン留めされ、アニメーションが同期して進行します。

• ナビゲーション用のスパン要素
  左右に配置された「下」や「上」のテキストは、ユーザーにスクロール方向や操作のヒントを与えるためのものです。

• アニメーション対象の.box要素
  複数の.box要素は、CSSで細いライン状にスタイルが当てられており、後述するGSAPのタイムラインによってそれぞれ動きを付けられています。

---

CSSによるスタイル設定

CSSでは、画面全体のデザインや各要素の配置、サイズが定義されています。以下に主な部分を説明します。

body {
  --light: #eee;
  --dark: #161616;
}

section {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--light);
}

span {
  position: absolute;
  display: block;
  text-align: center;
  font-size: 50px;
  z-index: 2;
  width: 50%;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--light);
  top: calc(50vh - 56px);
}

span.up {
  right: 0;
}

span.down {
  left: 0;
}

.box {
  height: 1.2vh;
  width: 50vw;
  margin-bottom: -0.2vh;
  background: var(--dark);
  display: block;
}

• ボディおよびセクションのスタイル
  セクションは画面全体（100vw × 100vh）を占め、オーバーフローが隠される設定になっています。背景は明るい色（ライトカラー）に統一され、全体の雰囲気を整えます。

• スパン要素のスタイル
  テキストは大きなフォントサイズで中央に配置され、左右に配置するためにleftとrightプロパティが使われています。これにより、視覚的なナビゲーションが分かりやすくなります。

• .box要素のスタイル
  各.boxは横幅50vw、非常に薄い高さ（1.2vh）に設定され、マイナスマージンで微妙に重なり合うようなレイアウトになっています。背景には濃い色（ダークカラー）が使われ、アニメーション中の動きがはっきりと視認できるようになっています[2]。

---

GSAPによるアニメーションとScrollTriggerの連携

GSAPのタイムラインを使用することで、複数のアニメーションを一つのシーケンスにまとめ、スクロールに連動して再生する仕組みが実装されています。コードは以下の通りです。

gsap.timeline({
  scrollTrigger: {
    trigger: ".trigger",
    scrub: 0.5,
    pin: true,
    start: "top top",
    end: "+=150%"
  }
})
.to(".box", {
  force3D: true,
  duration: 1,
  xPercent: 100,
  ease: "power1.inOut",
  stagger: { amount: 1 }
})
.to(".box", { ease: "power1.out", duration: 1, rotation: "45deg" }, 0)
.to(".box", { ease: "power1.in", duration: 1, rotation: "0deg" }, 1);

• ScrollTriggerの設定
  タイムラインのscrollTriggerオプションでは、アニメーションの開始・終了位置やスクロールに連動した進行具合を設定しています。

  • trigger: ".trigger"
    対象となるセクション全体をトリガーに設定します。
  • pin: true
    アニメーション中はセクションが固定され、スクロールしても位置が変わらないようにします。
  • scrub: 0.5
    スクロール位置に合わせてアニメーションの進行を滑らかに連動させ、0.5秒ほどの遅延を付けています。
  • start: "top top" と end: "+=150%"
    スクロールの始点と終点を画面上部に対して設定し、縦幅の150%分にわたってアニメーションが展開される仕組みとなっています[3]。

• タイムラインのアニメーション詳細
  タイムラインは複数のアニメーションを連続して定義しています。

  • 横方向の移動
    1つ目の.to()メソッドでは、各.box要素を水平方向に100%移動させます。xPercent: 100により、ボックスの幅分だけ右へずらされます。staggerオプションを使用することで、各要素のアニメーション開始タイミングがずらされ、連続的な流れを実現しています。
    また、force3D: trueでハードウェアアクセラレーションを利用し、パフォーマンスの向上を狙っています[4]。

  • 回転アニメーション
    2つ目の.to()メソッドは、同時に各.boxを45度回転させる処理です。このアニメーションはタイムラインの開始時（タイム0）に設定されています。
    さらに3つ目のアニメーションでは、時間軸上1秒目から再び各.boxの回転を0度に戻し、元の状態へとリセットする動きを与えています。
    これにより、スクロールの動きに合わせて滑らかに移動と回転のトランジションが発生するデザインとなります[5]。

---

おわりに

今回の解説では、GSAP3とScrollTriggerを組み合わせることで、スクロールに連動したコンテンツの遷移アニメーションをどのように実装できるかを紹介しました。HTMLで要素を並べ、CSSでレイアウトとスタイルを整えた後、GSAPのタイムラインで複数のアニメーションステップを定義することで、動きのあるインタラクティブな画面表現が実現できます。これらの技術を活用することで、より魅力的なユーザー体験を提供するウェブサイト制作が可能になります[6]。

以上のように、GSAPとScrollTriggerは設定がシンプルでありながら非常に強力なツールです。ぜひ自分のプロジェクトで実験して、あなた独自のダイナミックな表現を追求してください。

Citations:
[1] https://tympanus.net/codrops/2019/11/14/the-new-features-of-gsap-3/
[2] https://gsap.com/docs/v3/Plugins/ScrollTrigger/

See the Pen Untitled by Yushi Yamamoto (@yamamotoyushi) on CodePen.