GSAPとは？

GSAP（GreenSock Animation Platform）は、ウェブアニメーションを簡単に実装できる強力なJavaScriptライブラリです。高速かつ柔軟性に富み、開発者が複雑なアニメーションを容易に実装できるように設計されています。アワードを受賞するようなWebサイトの多くでGSAPが利用されており、ハイレベルなアニメーションも実装しやすいライブラリになっています。

GSAPは、タイムラインに基づいたアニメーション制御を提供し、要素の動きを正確に調整できます。これにより、緻密で洗練されたインタラクションが実現可能になります。特に、ScrollTriggerプラグインは、スクロール位置に応じたアニメーションを作成する際に非常に便利です。このプラグインを使用することで、スクロールに反応して要素が動くアニメーションを容易に実装でき、ウェブサイトにダイナミックな動きを提供することが可能になります。

GSAPのScrollTriggerについて

GSAPのScrollTriggerプラグインは、スクロールベースのアニメーションを制御するための強力なツールです。このプラグインを利用することで、スクロールの進行に応じて、要素の表示や動きを精密にコントロールできます。ScrollTriggerは、ウェブページ上の特定の位置に達したときにアニメーションを開始・停止させる機能を提供し、ユーザーのスクロール行動に連動して、視覚的に魅力的なエフェクトを作成することが可能になります。

具体的には、ScrollTriggerはトリガーとなる要素の位置を基準にして、その要素のビューポート内での動きや状態の変化を定義します。これにより、ページ上の特定のスクロール位置でアニメーションを開始したり、スクロールに応じて要素を徐々に移動させたりすることが容易になります。また、スクロールの進行度合いに基づいて要素の透明度やサイズを変化させるような細かい調整も可能です。

Next.jsでGSAP ScrollTriggerを実装してみる

Next.jsはReactベースのフレームワークであり、GSAPとScrollTriggerを使用して、スムーズでダイナミックなウェブアプリケーションを作成するのに最適な環境を提供します。ここでは、実際にNext.jsプロジェクト内でGSAPとScrollTriggerを利用する方法を見ていきましょう。

ライブラリのインポート

まず、GSAPとScrollTriggerプラグインをプロジェクトに組み込むために、必要なライブラリをインポートします。

tsx
import { useRef, useEffect } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

必要なライブラリやフックをインポートしてgsap.registerPlugin(ScrollTrigger); でScrollTriggerプラグインをGSAPに登録します。

useRefの設定

useRef フックは、ReactでDOM要素への直接的な参照を保持するために使用されます。このフックは、レンダリング間での値の保持に役立ち、その値は変更してもコンポーネントの再レンダリングを引き起こさないため、React(Next.js)でGSAPを利用したアニメーションの実装においてターゲットとなるDOM要素を指定するのに適しています。

tsx
const ref = useRef(null);
...

return (
  <div>
    <p ref={ref}>
      アニメーションさせたい要素
    </p>
    {/* ... */}
  </div>
);

ref オブジェクトは、アニメーション対象のDOM要素への参照として機能します。コンポーネントがレンダリングされる際に、この ref を特定のDOM要素に割り当てることで、後の useEffect フック内でその要素にアクセスし、アニメーションを適用することができます。

アニメーションの設定

最後に、useEffect フック内でScrollTriggerを使ったアニメーションを設定します。

tsx
useEffect(() => {
  const element = ref.current;

  gsap.to(element, {
    x: '-100%', // 左に移動
    scrollTrigger: {
      trigger: element,
      scrub: true, // スクロールに応じてアニメーションさせる
    },
  });
}, []);

このコードでは、useEffect 内で ref.current を使用してアニメーション対象の要素を取得し、gsap.to を使ってアニメーションを定義しています。ここでのアニメーションは、スクロールに応じて要素を左に100%移動させるものです。scrollTrigger オブジェクト内の trigger プロパティはアニメーションが開始される要素を指定し、scrub プロパティはスクロールの動きに合わせてアニメーションが進行するように設定します。

以上の手順により、Next.jsでGSAPのScrollTriggerを用いたアニメーションを実装することができました。アニメーションの設定を調整することでスクロールに対して少し遅れてアニメーションさせるなど細かい調整も可能です。

その他のGSAPの解説記事はこちら。

GSAPのtimelineの基礎から応用まで使い方を解説 | DeLT Web制作Tips
Web開発において、アニメーションはユーザー体験を向上させる重要な要素です。この記事では、JavaScriptの強力なライブラリ「GSAP」のタイムライン機能を使ったアニメーションの実装方法に焦点を当てます。GSAPタイムラインを活用することで、複雑なアニメーションも効率的かつ効果的に制御できることを、具体的な例を交えながら解説していきます。
パララックスの基本と実装方法まとめ！初心者向けに分かりやすく解説 | DeLT Web制作Tips
パララックスはウェブサイトの見栄えを格段に高め、ユーザーを引き込む効果的な手法です。この記事では、パララックスの基本概念から実装方法まで、初心者にも分かりやすく解説します。CSSだけで作るシンプルな方法から、JavaScriptライブラリを使った高度な手法まで、様々な実装パターンを紹介するので、自分のサイトに合った方法が見つかるはずです。

矢井田 友暉

植物の美しさを追究する研究者であり、新時代の技術を構築するWeb3.0エンジニアの矢井田です。植物生態学においてはその無垢な美しさに隠された複雑な生態系を解明することに魅了され、Web3.0の開発ではその透明性と効率性がもたらす無限の可能性に挑戦しています。