🚀✨ GSAP + ScrollTriggerで動的な個人ページを作成しよう！ 🎨💡

Last updated at 2025-02-16Posted at 2023-12-28

GSAP ScrollTriggerを使用した個人ページの解説

See the Pen GSAP ScrollTriggerを使用した個人ページ by Yushi Yamamoto (@yamamotoyushi) on CodePen.

1. 全体構成

このページは、いくつかのセクションで構成されています。各セクションには視覚的な要素やアニメーションが組み込まれており、スクロール操作に応じて動的に変化します。

イントロセクション (section--intro):
- 中央に画像とテキストが配置され、背景にはSVGで描画されたクロスやリングが表示されます。
- GSAPを使用して画像の拡大縮小やテキストの移動などのアニメーションが実装されています。
テキストセクション (section--text):
- テキストボックス内にラインが描画され、スクロールに応じてラインが伸縮するアニメーションがあります。
作品セクション (section--works):
- カード形式で作品を表示。カードはスクロール時に回転や拡大縮小されるインタラクションが追加されています。
フッターセクション (section--footer):
- 大きな文字やリンクボタンが含まれ、スクロールでフェードインする仕組みです。

2. アニメーションの詳細

このプロジェクトでは、GSAPとそのプラグインであるScrollTriggerを利用して、スクロール連動型のアニメーションを実現しています。

主要なアニメーション例

(1) 画像の拡大 (`.hero__image`)

gsap.from(".hero__image", {
  scale: 8,
  transformOrigin: "center center",
  ease: "expo",
  scrollTrigger: {
    trigger: ".hero__image",
    start: "center center",
    end: "center top",
    pin: true,
    scrub: 0.5
  }
});

初期状態で画像を大きく表示し、スクロールに合わせて縮小。
pinオプションで要素を固定しながらアニメーション。

(2) リングの拡大 (`.ring--left`, `.ring--right`)

gsap.to(".ring--right", {
  scale: 5,
  ease: "power4",
  transformOrigin: "center",
  scrollTrigger: {
    trigger: ".ring--right",
    start: "top center",
    end: "bottom+=300 200px",
    pin: true,
    scrub: 0.25
  }
});

リングが中心から拡大するアニメーション。
scrubプロパティでスクロール量に応じたスムーズな動きを実現。

(3) テキストの横移動 (`.herotitle--1`, `.herotitle--2`)

gsap.to(".hero__title--1", {
  xPercent: -50,
  scrollTrigger: {
    trigger: ".hero__title--1",
    start: "center center",
    pin: true,
    scrub: 0.5
  }
});

テキストが左右に移動。
xPercentプロパティで相対的な位置変更を指定。

(4) カードの回転と拡大 (`.card-1`, `.card-3`)

gsap.to(".card-1", {
  rotate: -20,
  scale: 0.75,
  x: -200,
  transformOrigin: "bottom center",
  scrollTrigger: {
    trigger: ".cards",
    start: "center center",
    end: "bottom top",
    pin: true,
    scrub: true
  }
});

カード要素が回転しつつ縮小。
transformOriginで回転軸を指定し、自然な動きを実現。

(5) フッター要素のフェードイン

let tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".footer__link",
    start: "top 75%"
  }
});

tl.from(".footer__link", { opacity: 0, y: 90, duration: 2, ease: "expo.out" })
  .from(".footer__copy", { opacity: 0, y: 90, duration: 2, ease: "expo.out" }, "-=1.75")
  .from(".footer__button", { opacity: 0, y: 90, duration: 2, ease: "power3.out" }, "-=1.75");

フッター内のリンクやボタンが下からフェードイン。
タイムラインを使用して複数のアニメーションを同期的に制御。

3. カスタムカーソル

ページ全体では、カスタムカーソルも実装されています。カーソルはマウス移動やホバー時に拡大縮小します。

document.addEventListener("mousemove", (e) => {
  let x = e.clientX;
  let y = e.clientY;

  gsap.to(".cursor", {
    x: x - 16,
    y: y - 16,
    ease: "power3"
  });
});

hoverCursors.forEach(function (cursor) {
  cursor.addEventListener("mouseenter", () => {
    gsap.to(".cursor", { scale: 2.5 });
  });

  cursor.addEventListener("mouseleave", () => {
    gsap.to(".cursor", { scale: 1 });
  });
});

マウス位置に追従するカーソル。
特定の要素上でホバー時に拡大するインタラクション。

4. デザイン要素

デザイン面ではCSS変数（カスタムプロパティ）を活用し、テーマカラーや背景パターンを定義しています。

:root {
   --blue: #01266c;
   --gold: #f7c505;
   --yellow: #fbdc74;
   --skyblue: #0071fb;
   --black: #1a1a1a;
}

これにより、一貫性のあるカラースキームとメンテナンス性の向上が図られています。

5. 使用技術まとめ

ライブラリとプラグイン

GSAP（GreenSock Animation Platform）
ScrollTrigger（GSAPプラグイン）
SplitText（テキスト分割用プラグイン）

特徴

スクロール連動型アニメーション。
カスタマイズ可能なデザインとレスポンシブ対応。
高度なタイムライン制御による複数アニメーションの統合。

このコードは、視覚的にも動きにも優れたウェブページを作成するための良いサンプルです。GSAPとScrollTriggerを活用することで、ユーザー体験を向上させるダイナミックなエフェクトが簡単に実現できます。