EN
JP
KRGSAPとは？JavaScriptで高性能なアニメーションを実装する方法を解説
WebサイトやWebアプリケーションでは、ユーザーの視線誘導、ブランド表現、操作フィードバック、ページ遷移の自然さを高めるために、アニメーションが重要な役割を持ちます。ボタンを押したときの反応、スクロール時に要素が現れる演出、ヒーローセクションのダイナミックな表示、ローディング中の視覚的な待機表現などは、単なる装飾ではなく、ユーザー体験を支えるUI要素です。
GSAPは、こうしたWebアニメーションをJavaScriptで高性能かつ柔軟に制御できるアニメーションライブラリです。CSSだけでは管理しづらい複雑な連続アニメーションや、スクロール位置に応じた演出、複数要素を順番に動かすタイムライン演出などを、比較的分かりやすいコードで実装できます。特に、LP制作、ブランドサイト、インタラクティブなWebサイト、SaaSのUI改善など、動きの品質が重要なプロジェクトで活用されます。
一方で、アニメーションは使い方を誤ると、ページの読み込みを重くしたり、ユーザーの操作を妨げたり、視認性を下げたりする原因にもなります。GSAPを効果的に使うには、単に要素を派手に動かすのではなく、目的に合わせて演出を設計し、パフォーマンスやアクセシビリティにも配慮することが重要です。本記事では、GSAPの基本から実務での活用方法、ReactやTypeScriptとの連携、主要プラグイン、ベストプラクティスまでを体系的に解説します。
1. GSAPとは何か
GSAPとは、JavaScriptでWebアニメーションを実装するための高性能なアニメーションライブラリです。正式名称はGreenSock Animation Platformで、HTML要素、CSSプロパティ、SVG、Canvas、WebGL、JavaScriptオブジェクトなど、さまざまな対象をアニメーションできます。CSSのtransitionやanimationでも基本的な動きは作れますが、GSAPを使うと複雑な制御や連続した演出をより柔軟に管理できます。
GSAPは、単発のアニメーションだけでなく、複数のアニメーションを時間軸で組み立てるタイムライン機能が強力です。たとえば、タイトルをフェードインし、画像をスライドさせ、ボタンを少し遅れて表示するような演出を、順番や重なりを調整しながら実装できます。さらに、ScrollTriggerなどのプラグインを使えば、スクロール位置に応じたアニメーションも実装しやすくなります。
1.1 GSAPの概要
GSAPは、Web上のさまざまな要素を滑らかに動かすためのアニメーションエンジンです。基本的には、対象となる要素を指定し、どのプロパティをどの値へ変化させるかを記述します。たとえば、要素を右へ移動する、透明度を変える、拡大縮小する、回転させる、色を変えるといった動きをJavaScriptで制御できます。
GSAPの基本メソッドには、gsap.to、gsap.from、gsap.fromToがあります。gsap.toは現在の状態から指定した状態へ変化させ、gsap.fromは指定した状態から現在の状態へ変化させ、gsap.fromToは開始状態と終了状態を明示して動かします。これらの基本を理解すれば、Webサイト上の多くのアニメーションを実装できるようになります。
1.2 GSAPが開発された背景
GSAPが必要とされる背景には、ブラウザごとの挙動差や、複雑なアニメーション制御の難しさがあります。CSSアニメーションは軽量で便利ですが、複数要素を順番に制御したり、途中で停止・再開したり、スクロール位置やユーザー操作と連動させたりする場合には、管理が難しくなることがあります。また、ブラウザやデバイスによって動きの見え方が変わると、意図した演出を安定して提供しにくくなります。
GSAPは、こうしたアニメーション実装の課題を解決するために、JavaScriptから高精度にアニメーションを制御できる仕組みとして普及しました。特に、制作会社やブランドサイト、インタラクティブなLPなど、アニメーション品質が成果に直結する現場では、細かなタイミング調整や複雑な演出を管理しやすいことが大きなメリットになります。単なる装飾ではなく、体験設計の一部としてアニメーションを扱うための基盤として利用されています。
1.3 GSAPが人気を集める理由
GSAPが人気を集める理由は、高性能でありながら、複雑なアニメーションを比較的分かりやすく記述できる点にあります。JavaScriptで細かく制御できるため、CSSだけでは実装しづらい演出も作りやすく、タイムライン機能を使えば複数の動きを整理して管理できます。アニメーションの開始タイミング、遅延、速度、イージング、繰り返し、逆再生なども柔軟に設定できます。
また、GSAPはReact、Vue、Next.js、通常のHTMLサイトなど、さまざまな環境で利用しやすい点も人気の理由です。特定のフレームワークに依存しないため、Web制作からアプリ開発まで幅広いプロジェクトに導入できます。さらに、ScrollTrigger、MotionPathPlugin、Flip、Draggableなどのプラグインを活用することで、スクロール演出、パスに沿った移動、状態遷移、ドラッグ操作など、より高度なインタラクションも実装できます。
2. GSAPの主な特徴
GSAPの主な特徴は、高性能なアニメーションを実装できること、ブラウザ互換性が高いこと、JavaScriptで柔軟に制御できること、複雑なアニメーションを簡潔に記述できることです。Webアニメーションでは、見た目の美しさだけでなく、動作の滑らかさや安定性も重要です。GSAPは、こうした実務上の要求に応えやすいライブラリとして利用されています。
特に、複数の要素を連続して動かす場合や、スクロールに応じてアニメーションを開始する場合、CSSだけで実装するとコードが複雑になりやすくなります。GSAPでは、アニメーションの状態をJavaScriptで管理できるため、演出の流れをコード上で整理しやすくなります。デザイン性の高いWebサイトや、操作感を重視するUIでは、大きな強みになります。
2.1 高性能なアニメーションを実装できる
GSAPは、滑らかで高性能なアニメーションを実装しやすいライブラリです。要素の位置、透明度、拡大縮小、回転などを効率的に変化させることができ、適切に設計すればユーザーが自然に感じる動きを作れます。特に、transformやopacityを中心にアニメーションすることで、ブラウザの描画負荷を抑えやすくなります。
ただし、GSAPを使えば無条件で高速になるわけではありません。多数の要素を同時に動かしたり、レイアウト再計算が頻繁に発生するプロパティをアニメーションしたりすると、パフォーマンスが低下する可能性があります。高性能なアニメーションを実現するには、GSAPの機能だけでなく、動かすプロパティの選び方、要素数、描画タイミング、デバイス性能への配慮も重要です。
2.2 ブラウザ互換性が高い
GSAPは、さまざまなブラウザ環境で安定したアニメーションを実装しやすい点も特徴です。Web制作では、Chrome、Safari、Firefox、Edgeなど複数のブラウザで動作確認が必要になります。CSSやJavaScriptの一部機能はブラウザによって挙動が異なる場合がありますが、GSAPはそうした差を吸収しながらアニメーションを扱いやすくするために利用されます。
ブラウザ互換性が高いことは、ブランドサイトや企業サイトのように、多様なユーザーがアクセスするページでは特に重要です。ユーザーの環境によってアニメーションが崩れたり、動作しなかったりすると、サイト全体の印象に影響します。GSAPを使うことで、アニメーションの実装を安定させやすくなり、複数環境での品質管理もしやすくなります。
2.3 JavaScriptで柔軟に制御できる
GSAPでは、アニメーションをJavaScriptで柔軟に制御できます。単に時間に沿って動かすだけでなく、クリック、ホバー、スクロール、フォーム操作、ページ遷移、API処理の完了など、さまざまなイベントに合わせてアニメーションを開始できます。これにより、ユーザーの操作に応じた自然なフィードバックを作りやすくなります。
また、JavaScriptで制御できるため、条件分岐や状態管理とも組み合わせやすいです。たとえば、メニューが開いている場合は閉じるアニメーションを再生し、閉じている場合は開くアニメーションを再生する、といった制御が可能です。Reactなどのフレームワークと組み合わせる場合も、状態や参照と連携して、コンポーネント単位でアニメーションを管理できます。
2.4 複雑なアニメーションを簡潔に記述できる
GSAPは、複雑なアニメーションを比較的簡潔に記述できます。たとえば、複数の要素を少しずつ遅らせて表示する、タイトルと画像とボタンを順番に動かす、スクロールに合わせて背景を動かす、といった演出を、タイムラインやプラグインを使って整理できます。CSSだけで同じ演出を作る場合、クラスの切り替えや遅延時間の管理が複雑になることがあります。
GSAPのタイムラインを使えば、アニメーションを一つの流れとして記述できます。後からタイミングを調整したり、要素を追加したりする場合も、タイムライン上で管理できるため、保守しやすくなります。特に、LPやブランドサイトのように演出の順序が重要なページでは、GSAPのタイムライン管理が大きなメリットになります。
3. GSAPのインストール方法
GSAPは、npm、CDN、TypeScript環境など、プロジェクトの構成に応じて導入できます。ReactやNext.js、Viteなどのモダンな開発環境ではnpmで導入することが多く、静的なHTMLサイトや簡単なデモではCDNを使う方法もあります。導入方法そのものはシンプルですが、実務ではプラグインの登録やコンポーネントのライフサイクル管理も重要になります。
特にScrollTriggerやMotionPathPluginなどのプラグインを使う場合は、GSAP本体に加えてプラグインをインポートし、gsap.registerPlugin()で登録してから利用します。ビルドツールを使う環境では、登録を明示することでツリーシェイキングによる除外を防ぎやすくなります。プロジェクトの規模に応じて、GSAP設定用の共通ファイルを用意するのも有効です。
3.1 npmでGSAPを導入する方法
npmでGSAPを導入する場合は、プロジェクトのルートディレクトリでnpm install gsapを実行します。これにより、JavaScriptやTypeScriptのファイルからGSAPをインポートして利用できるようになります。React、Next.js、Vue、Viteなどの開発環境では、npmで導入する方法が一般的です。
導入後は、import gsap from 'gsap'のように読み込み、対象要素に対してgsap.to()やgsap.from()を実行します。ScrollTriggerなどのプラグインを使う場合は、プラグインを追加でインポートして登録します。複数ファイルでGSAPを使う場合は、共通の初期化ファイルを作ってプラグイン登録をまとめると、管理がしやすくなります。
npm install gsap
3.2 CDNでGSAPを利用する方法
CDNでGSAPを利用する場合は、HTMLファイルにscriptタグを追加します。ビルド環境を用意しなくても使えるため、静的サイト、簡単な検証、学習用サンプルでは手軽に導入できます。scriptタグでGSAPを読み込むと、グローバル変数としてgsapを利用できるため、HTMLとJavaScriptだけでアニメーションを試せます。
ただし、本格的な開発では、依存関係やバージョン管理を明確にするためにnpm導入が向いていることが多いです。CDNは素早く試すには便利ですが、チーム開発やビルド最適化、TypeScriptとの連携、Reactコンポーネント化を考える場合は、npmで管理する方が保守しやすくなります。用途に応じて導入方法を選びましょう。
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
3.3 TypeScriptでGSAPを利用する方法
TypeScriptでGSAPを利用する場合も、基本的にはnpmでGSAPをインストールしてインポートします。GSAPはTypeScript環境でも利用でき、アニメーション対象や設定オブジェクトを型補完しながら実装できます。ReactやNext.jsでTypeScriptを使っている場合は、DOM要素を参照するためにuseRef<HTMLDivElement | null>のような型指定を行うことが多くなります。
TypeScriptでGSAPを扱う際は、DOM参照がnullになる可能性を考慮することが重要です。コンポーネントが描画される前は要素が存在しないため、ref.currentを確認してからアニメーションを実行する必要があります。また、プラグインを使う場合は、インポートと登録を明確にしておくと、型補完や保守性の面でも扱いやすくなります。
4. GSAPの基本的な使い方
GSAPの基本は、対象要素に対して「どの状態へ動かすか」「どの状態から動かすか」「どの状態からどの状態へ動かすか」を指定することです。代表的なメソッドは、gsap.to()、gsap.from()、gsap.fromTo()の3つです。この3つを理解すれば、移動、フェード、拡大縮小、回転などの基本的なアニメーションを実装できます。
アニメーション設定では、duration、delay、ease、opacity、x、y、scale、rotationなどを指定します。durationはアニメーション時間、delayは開始までの遅延、easeは動きの緩急を表します。単に要素を動かすだけでなく、自然な動きにするためには、イージングやタイミングの調整が重要です。
4.1 gsap.toの使い方
gsap.to()は、現在の状態から指定した終了状態へアニメーションするメソッドです。たとえば、現在の位置から右へ100px移動する、現在の透明度から0にする、現在のサイズから1.2倍に拡大する、といった処理に使います。最も基本的で利用頻度の高いメソッドです。
gsap.to()は、ユーザー操作に応じたアニメーションにも向いています。たとえば、ボタンをクリックしたときにカードを移動させる、メニューを開く、モーダルを表示する、といった場面です。現在の状態から目的の状態へ変化させるため、UIの状態変更を視覚的に表現しやすくなります。
gsap.to('.box', {
x: 200,
opacity: 1,
duration: 1,
ease: 'power2.out',
});
4.2 gsap.fromの使い方
gsap.from()は、指定した開始状態から現在の状態へアニメーションするメソッドです。たとえば、要素が本来の位置にある状態に対して、下から上へ現れるように見せたい場合、y: 50やopacity: 0を開始状態として指定します。ページ読み込み時やスクロール表示時の登場演出でよく使われます。
gsap.from()のメリットは、HTMLやCSSで最終的な表示状態を自然に定義できることです。要素は通常のレイアウト上に配置しておき、アニメーション開始時だけ一時的に別の状態から戻すように動かします。これにより、アニメーションが無効な環境でも最終状態が表示されやすく、実装の見通しも良くなります。
gsap.from('.title', {
y: 40,
opacity: 0,
duration: 0.8,
ease: 'power3.out',
});
4.3 gsap.fromToの使い方
gsap.fromTo()は、開始状態と終了状態を明示してアニメーションするメソッドです。gsap.from()やgsap.to()よりも指定は少し長くなりますが、開始と終了を正確に制御したい場合に便利です。たとえば、透明度0から1へ、X座標-100から0へ、スケール0.8から1へ、といった動きを明確に定義できます。
gsap.fromTo()は、初期状態がブラウザやCSSの状態に依存してほしくない場合に向いています。たとえば、同じ要素を何度も再生するアニメーションや、コンポーネントの状態によって開始位置が変わる可能性がある場合、開始値と終了値を明示することで安定した動きを作れます。
gsap.fromTo(
'.card',
{ opacity: 0, y: 30 },
{ opacity: 1, y: 0, duration: 0.8 }
);
5. GSAPで要素を移動させる方法
GSAPでは、xやyを使って要素を移動できます。xは横方向、yは縦方向の移動を表し、CSSのtransform: translate()に近い感覚で扱えます。要素の移動は、カードのスライド、メニューの開閉、画像の登場演出、ボタンのインタラクションなど、多くのUIアニメーションで利用されます。
移動アニメーションを実装する際は、leftやtopではなく、できるだけtransform系のプロパティを使うことが推奨されます。xやyは内部的にtransformを利用するため、レイアウト全体への影響を抑えやすく、パフォーマンス面でも扱いやすいです。滑らかな動きを作るには、移動距離、時間、イージングを適切に調整することが重要です。
5.1 X方向へ移動する方法
X方向へ移動するには、xプロパティを指定します。正の値を指定すると右方向、負の値を指定すると左方向へ移動します。たとえば、カードを右へ200px移動させる場合は、x: 200と指定します。メニューを横からスライド表示する場合や、画像を横方向に流す演出でよく使われます。
X方向の移動では、画面幅やレスポンシブ対応にも注意が必要です。固定のピクセル値だけで指定すると、モバイル画面では移動距離が大きすぎたり、デスクトップでは小さすぎたりする場合があります。必要に応じて、パーセント指定、画面幅に応じた条件分岐、GSAPのメディアクエリ機能などを活用すると、より自然な移動演出を設計できます。
gsap.to('.box', {
x: 200,
duration: 1,
});
5.2 Y方向へ移動する方法
Y方向へ移動するには、yプロパティを指定します。正の値を指定すると下方向、負の値を指定すると上方向へ移動します。スクロール時に要素が下からふわっと現れる演出や、モーダルが上から降りてくる演出、カードが少し浮き上がるようなホバー演出でよく使われます。
Y方向の移動は、フェードインと組み合わせると自然な登場演出になります。たとえば、y: 40とopacity: 0を開始状態にして、現在位置と透明度1へ戻すことで、下から現れるアニメーションを作れます。このような演出は、LPやサービスサイトでセクションごとの視線誘導に活用できます。
gsap.from('.section-item', {
y: 40,
opacity: 0,
duration: 0.8,
});
5.3 複数要素を同時にアニメーションする方法
GSAPでは、同じセレクタに一致する複数要素をまとめてアニメーションできます。たとえば、複数のカードに対して同じフェードイン演出を設定できます。さらに、staggerを使うと、各要素の開始タイミングを少しずつずらして、連続的に表示されるような演出を作れます。
複数要素のアニメーションでは、すべてを同時に動かすより、少しずつ遅らせた方が自然に見えることがあります。カード一覧やメニュー項目、アイコンリストなどを表示する場合、staggerを使うことで、視線の流れを作りやすくなります。ただし、遅延を大きくしすぎると表示に時間がかかり、ユーザーが待たされているように感じるため、短めに調整することが大切です。
gsap.from('.card', {
y: 30,
opacity: 0,
duration: 0.6,
stagger: 0.1,
});
6. GSAPでフェードアニメーションを作成する方法
フェードアニメーションは、透明度を変化させて要素を表示・非表示にする基本的な演出です。GSAPでは、opacityを操作することで簡単にフェードインやフェードアウトを実装できます。フェードは移動や拡大縮小と組み合わせやすく、自然な登場演出や画面遷移演出に向いています。
フェードアニメーションを使う際は、速度とタイミングが重要です。表示が速すぎると唐突に見え、遅すぎると操作の妨げになります。一般的なUIでは短めのフェードが適しており、ブランドサイトやLPでは少し長めの演出で世界観を出すこともあります。ユーザーにとって自然なテンポを意識して設計しましょう。
6.1 フェードインを実装する方法
フェードインは、要素を透明な状態から表示状態へ変化させるアニメーションです。GSAPでは、gsap.from()でopacity: 0を指定する方法がよく使われます。要素の最終状態はCSSやHTML上で通常表示として定義し、アニメーション開始時だけ透明な状態から戻すようにすると、実装が分かりやすくなります。
フェードインは、ページ読み込み時のタイトル表示や、スクロールでセクションが見えたときの表示演出に向いています。単体で使っても自然ですが、yやscaleと組み合わせることで、より動きのある登場演出を作れます。ただし、すべての要素にフェードインを付けると画面全体が重く感じられるため、重要な要素に絞って使うことが大切です。
gsap.from('.fade-item', {
opacity: 0,
duration: 0.8,
});
6.2 フェードアウトを実装する方法
フェードアウトは、要素を表示状態から透明な状態へ変化させるアニメーションです。GSAPでは、gsap.to()でopacity: 0を指定します。モーダルを閉じる、通知を消す、ローディング画面を終了する、ページ遷移前に画面を暗くするなどの場面で利用できます。
フェードアウトを実装する際は、透明になった後の要素をどう扱うかも考える必要があります。opacity: 0にしても要素はDOM上に残り、クリック判定やレイアウトに影響する場合があります。そのため、アニメーション完了後にdisplay: noneを設定したり、Reactの状態を更新して要素を非表示にしたりする処理が必要になることがあります。
gsap.to('.modal', {
opacity: 0,
duration: 0.4,
onComplete: () => {
document.querySelector('.modal').style.display = 'none';
},
});
6.3 スクロール表示演出で活用する方法
スクロール表示演出では、ユーザーがページを下へ進めたタイミングで要素をフェードインさせることがよくあります。GSAP単体でもIntersection Observerなどと組み合わせれば実装できますが、ScrollTriggerを使うと、スクロール位置に応じた開始条件や進行制御を設定しやすくなります。
スクロール表示演出は、LPやサービス紹介ページで特に効果的です。セクションごとに要素が自然に現れることで、ユーザーの視線を誘導し、情報を段階的に伝えられます。ただし、すべての要素がスクロールで遅れて表示されると、情報にたどり着くまでの負担が増える可能性があります。読みやすさを優先し、必要な場所にだけ演出を加えることが重要です。
7. GSAP Timeline活用法
GSAPのタイムラインは、複数のアニメーションを一つの流れとして管理するための機能です。単発のgsap.to()を複数書くこともできますが、演出が増えると開始タイミングや順序の管理が難しくなります。タイムラインを使えば、タイトル、画像、説明文、ボタンなどの動きを一連のシーケンスとして整理できます。
タイムラインは、ローディング演出、ヒーローセクション、ページ遷移、モーダル表示、チュートリアル演出など、複数の要素を順番に動かす場面で非常に便利です。後から演出の順番を入れ替えたり、開始タイミングを重ねたり、全体の速度を調整したりしやすくなるため、実務での保守性も高まります。
7.1 GSAP Timelineとは
GSAPのタイムラインとは、複数のアニメーションを時間軸上に配置して管理する仕組みです。gsap.timeline()でタイムラインを作成し、その中にto()、from()、fromTo()を追加していきます。これにより、複数のアニメーションを順番に再生したり、一部を重ねて再生したりできます。
タイムラインを使うと、アニメーション全体を一つの単位として制御できます。たとえば、再生、停止、一時停止、逆再生、速度変更などをまとめて扱えます。単発アニメーションが少ない場合は不要ですが、複数の演出が組み合わさる場合は、タイムラインを使った方がコードが整理され、後から調整しやすくなります。
7.2 複数アニメーションを連結する方法
複数アニメーションを連結するには、タイムラインに対してto()やfrom()を順番に追加します。最初にタイトルを表示し、次に画像をスライドさせ、最後にボタンを表示するような演出を、上から順に記述できます。これにより、演出の流れをコード上で直感的に把握しやすくなります。
また、タイムラインでは開始タイミングを細かく調整できます。前のアニメーションが終わってから開始するだけでなく、少し重ねて開始したり、特定のラベル位置から開始したりできます。これにより、単調な順番再生ではなく、自然でテンポの良い演出を作ることができます。
const tl = gsap.timeline();
tl.from('.hero-title', { y: 40, opacity: 0, duration: 0.8 })
.from('.hero-image', { scale: 0.9, opacity: 0, duration: 0.8 }, '-=0.4')
.from('.hero-button', { y: 20, opacity: 0, duration: 0.5 });
7.3 シーケンスアニメーションを作成する方法
シーケンスアニメーションとは、複数の要素や動きを順序立てて再生する演出です。たとえば、ローディングロゴが表示され、背景が切り替わり、メインビジュアルが現れ、テキストが順番に表示されるような構成です。GSAPのタイムラインを使えば、このような演出を管理しやすくなります。
シーケンスアニメーションでは、演出の長さに注意が必要です。長すぎるアニメーションは、ユーザーが目的の情報に到達するのを妨げる可能性があります。特にLPやサービスサイトでは、最初の印象を高めることと、情報をすぐに伝えることのバランスが重要です。タイムラインを使う場合も、演出の目的を明確にし、必要以上に長くしないように設計しましょう。
8. GSAP ScrollTrigger活用法
ScrollTriggerは、スクロール位置に応じてアニメーションを開始・進行・固定・同期できるGSAPの代表的なプラグインです。スクロールして要素が画面に入ったタイミングでフェードインさせる、背景をパララックスで動かす、セクションを固定しながらアニメーションを進めるなど、スクロール連動演出を実装できます。
スクロール演出は、Webサイトのストーリーテリングや視線誘導に効果的です。ただし、演出が過剰になると、ユーザーが自由にスクロールできないように感じたり、ページが重くなったりすることがあります。ScrollTriggerを使う場合は、演出の美しさだけでなく、読みやすさ、操作性、パフォーマンスにも配慮する必要があります。
8.1 ScrollTriggerとは
ScrollTriggerとは、スクロール位置をトリガーとしてGSAPアニメーションを制御するプラグインです。特定の要素が画面に入ったときにアニメーションを開始したり、スクロール量に合わせてアニメーションの進行度を変えたりできます。スクロールをきっかけにした表現を実装する場合に非常に便利です。
ScrollTriggerでは、trigger、start、end、scrub、pinなどの設定を使います。triggerは基準となる要素、startとendはアニメーションの開始・終了位置、scrubはスクロール量とアニメーション進行を同期する設定、pinは要素を一定時間固定する設定です。これらを組み合わせることで、さまざまなスクロール演出を作れます。
8.2 スクロール連動アニメーションを実装する方法
スクロール連動アニメーションを実装するには、GSAP本体とScrollTriggerを読み込み、gsap.registerPlugin(ScrollTrigger)で登録します。その後、通常のgsap.to()やgsap.from()の設定内にscrollTriggerを追加します。これにより、指定した要素がスクロール位置に到達したタイミングでアニメーションが実行されます。
スクロール連動演出では、開始位置の調整が重要です。要素が完全に見えてから動くのか、少し見え始めた時点で動くのかによって印象が変わります。また、モバイルでは画面が狭いため、デスクトップと同じ開始位置では不自然になることがあります。デバイスごとに調整し、読みやすいタイミングで演出が始まるように設計しましょう。
gsap.registerPlugin(ScrollTrigger);
gsap.from('.section-title', {
y: 40,
opacity: 0,
duration: 0.8,
scrollTrigger: {
trigger: '.section-title',
start: 'top 80%',
},
});
8.3 パララックス表現を作成する方法
パララックス表現とは、スクロールに合わせて背景や要素を異なる速度で動かし、奥行きや立体感を演出する手法です。GSAPとScrollTriggerを使うと、スクロール量に応じて背景画像や装飾要素をゆっくり移動させるような表現を作成できます。ブランドサイトやLPのヒーローセクションでよく使われます。
ただし、パララックスは使いすぎると読みにくさや酔いやすさにつながる可能性があります。特に、視差が大きすぎる演出や、スクロールに強く固定される演出は、ユーザーの操作感を損なうことがあります。パララックスは雰囲気づくりには有効ですが、本文の読みやすさや操作性を妨げない範囲で使うことが重要です。
9. GSAPでページ演出を強化する方法
GSAPは、ページ全体の印象を高める演出にも活用できます。ローディングアニメーション、ページ遷移、ヒーローセクション、モーダル表示、ナビゲーション開閉など、ユーザーがページを操作する中で目にする重要な場面に動きを加えることで、体験の質を高められます。特にファーストビューの演出は、サイト全体の印象に大きく影響します。
ただし、ページ演出は目的が明確でなければ逆効果になることがあります。ローディング演出が長すぎる、ページ遷移が遅い、ヒーロー演出が情報の理解を妨げる、といった状態は避けるべきです。GSAPを使う場合も、ユーザーが快適に情報へ到達できることを優先し、演出は補助的に設計することが重要です。
9.1 ローディングアニメーションを作成する方法
ローディングアニメーションは、ページやコンテンツの読み込み中に表示する演出です。GSAPを使えば、ロゴをフェードインさせたり、バーを伸ばしたり、複数の点を順番に動かしたりする表現を作れます。読み込み中の待ち時間を視覚的に補助し、ユーザーに処理が進行していることを伝えられます。
ただし、ローディングアニメーションは待ち時間を隠すための演出ではなく、待ち状態を分かりやすく伝えるためのUIです。実際の読み込みが完了しているのに演出のために待たせる設計は、ユーザー体験を悪化させる可能性があります。短く、分かりやすく、ブランドイメージに合った演出にすることが大切です。
9.2 ページ遷移演出を実装する方法
ページ遷移演出では、ページが切り替わる瞬間にフェードやスライドを加えることで、移動の唐突さを減らせます。GSAPを使うと、現在のページをフェードアウトしてから次のページを表示する、背景パネルをスライドさせて切り替える、コンテンツを順番に表示するといった演出を作れます。
ページ遷移演出では、速度と一貫性が重要です。演出が長いと操作のテンポが悪くなり、ページを移動するたびにストレスを感じる可能性があります。また、ページごとに異なる遷移演出を使いすぎると、サイト全体の統一感が失われます。ブランド表現として必要な場合でも、短く自然な動きにまとめることが望ましいです。
9.3 ヒーローセクションを演出する方法
ヒーローセクションは、Webページの最初に表示される重要なエリアです。GSAPを使えば、見出し、サブコピー、画像、ボタン、背景装飾などを順番に表示し、第一印象を強化できます。特にLPやブランドサイトでは、ヒーローセクションの動きがページ全体の印象を左右することがあります。
ヒーロー演出では、情報の読みやすさを最優先にする必要があります。文字が動きすぎたり、表示が遅すぎたりすると、ユーザーが内容を理解しにくくなります。見出しは早めに表示し、装飾的な要素は控えめに動かすなど、情報伝達と演出のバランスを取ることが重要です。GSAPのタイムラインを使えば、複数要素の表示順を細かく調整できます。
10. GSAPとCSS Animationの違い
GSAPとCSSアニメーションは、どちらもWeb上で動きを作るために使われますが、得意分野が異なります。CSSアニメーションは、シンプルなホバー演出や状態変化、軽い繰り返しアニメーションに向いています。一方、GSAPは、複雑な制御、連続した演出、スクロール連動、JavaScriptの状態と連携したアニメーションに向いています。
どちらか一方だけを使うのではなく、用途に応じて使い分けることが重要です。ボタンの色変更や簡単なホバー拡大はCSSで十分なことが多いですが、複数要素をタイムラインで制御する演出や、スクロール位置と同期する演出ではGSAPが適しています。実務では、CSSとGSAPを組み合わせる設計が現実的です。
10.1 GSAPの特徴
GSAPの特徴は、JavaScriptからアニメーションを細かく制御できることです。タイムラインによる順序管理、スクロール連動、条件分岐、イベント連携、停止・再開・逆再生など、複雑なアニメーション制御に強みがあります。演出全体をコードで管理できるため、LPやブランドサイトのように緻密な動きが求められる場面で有効です。
また、GSAPは複数の対象を一括で動かしたり、staggerで順番に表示したりする処理も書きやすいです。CSSだけで同じことをしようとすると、クラスや遅延時間の管理が複雑になる場合があります。GSAPはアニメーションをプログラムとして管理できるため、演出が増えても整理しやすい点がメリットです。
10.2 CSS Animationの特徴
CSSアニメーションは、CSSだけで動きを定義できる標準的な方法です。transitionを使えば、ホバー時の色変更や拡大縮小を簡単に実装できます。@keyframesを使えば、繰り返しアニメーションやローディングスピナーのような動きも作れます。JavaScriptを使わずに実装できるため、シンプルな演出には非常に向いています。
一方で、CSSアニメーションは複雑な制御には向かない場合があります。複数要素の順序を細かく管理したり、ユーザー操作やスクロール位置に応じて動きを柔軟に変えたりする場合、JavaScriptとの組み合わせが必要になります。CSSは状態に応じた簡単な動き、GSAPは複雑な演出制御というように使い分けるとよいでしょう。
10.3 GSAPを選ぶべきケース
GSAPを選ぶべきケースは、複数のアニメーションを時間軸で管理したい場合、スクロール連動演出を実装したい場合、JavaScriptの状態やイベントとアニメーションを連携したい場合です。たとえば、ヒーローセクションの登場演出、ページ遷移、パララックス、連続表示、インタラクティブなUIなどでは、GSAPの柔軟性が役立ちます。
逆に、ボタンのホバー、簡単なフェード、短いトランジションだけであれば、CSSで十分なこともあります。GSAPは強力ですが、すべての動きをGSAPで実装する必要はありません。プロジェクトの規模や演出の複雑さに応じて、CSSとGSAPを適切に使い分けることが重要です。
11. GSAPとReactを組み合わせる方法
ReactでGSAPを使う場合は、DOM要素への参照とコンポーネントのライフサイクルを意識する必要があります。Reactは仮想DOMを通じてUIを管理するため、直接DOMを操作するGSAPとは役割が異なります。そのため、useRefで対象要素を参照し、コンポーネントがマウントされた後にアニメーションを実行する設計が基本になります。
近年では、GSAP公式のReact向けフックであるuseGSAP()も利用できます。Reactではコンポーネントが再レンダリングされたり、開発環境で副作用が複数回実行されたりすることがあるため、アニメーションのクリーンアップが重要です。GSAPをReactで安全に扱うには、対象範囲を限定し、不要になったアニメーションを破棄する設計が必要です。
11.1 ReactでGSAPを利用する方法
ReactでGSAPを利用する場合、基本的にはコンポーネント内で対象要素にrefを設定し、マウント後にアニメーションを実行します。useEffectやuseLayoutEffectを使う方法もありますが、GSAP公式のuseGSAP()を使うと、React環境でのクリーンアップやスコープ管理を行いやすくなります。
Reactで注意すべき点は、レンダリングとアニメーションの責任を分けることです。Reactは状態に基づいてUIを描画し、GSAPは描画された要素に動きを加えます。状態管理までGSAPに任せすぎると、Reactのデータフローと矛盾する可能性があります。React側では表示状態を管理し、GSAPは見た目の動きに集中させる設計が望ましいです。
11.2 useRefとGSAPを連携する方法
useRefは、Reactコンポーネント内でDOM要素を参照するために使います。GSAPで特定の要素を動かしたい場合、ref.currentを対象にしてアニメーションを実行します。クラス名やセレクタで対象を指定することもできますが、Reactではコンポーネント単位で対象を明確にするためにuseRefを使う方法が安全です。
複数要素をまとめて扱う場合は、親要素にrefを設定し、その中の要素をスコープとして扱う方法もあります。これにより、他のコンポーネントにある同じクラス名の要素へ誤ってアニメーションが適用されるのを防ぎやすくなります。Reactでは、アニメーション対象をコンポーネント内に閉じ込める設計が重要です。
const boxRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
if (!boxRef.current) return;
gsap.to(boxRef.current, {
x: 100,
duration: 1,
});
}, []);
11.3 コンポーネント単位で管理する方法
ReactでGSAPを使う場合は、アニメーションをコンポーネント単位で管理すると保守しやすくなります。たとえば、ヒーローセクション用のアニメーションはHeroSection内にまとめ、カード一覧のアニメーションはCardList内にまとめるようにします。これにより、どのコンポーネントがどのアニメーションを持っているのかが分かりやすくなります。
コンポーネント単位で管理する際は、アンマウント時のクリーンアップも重要です。ページ遷移や条件付き表示によってコンポーネントが消える場合、アニメーションやScrollTriggerが残り続けると、不要な処理や不具合の原因になります。GSAPのコンテキストやuseGSAP()を活用し、コンポーネントのライフサイクルに合わせて安全に管理することが大切です。
12. GSAPとTypeScriptを組み合わせる方法
GSAPはTypeScript環境でも利用できます。TypeScriptを使うことで、DOM参照、アニメーション設定、関数の引数などを型安全に管理しやすくなります。特にReactとTypeScriptを組み合わせたプロジェクトでは、useRefの型指定や、アニメーション対象が存在するかどうかの確認が重要になります。
TypeScriptを使う目的は、アニメーションコードの安全性と保守性を高めることです。GSAPの設定はオブジェクト形式で書くことが多く、プロパティが増えるとミスが起きやすくなります。型補完を活用することで、利用できるプロパティを確認しながら実装でき、チーム開発でもコードの意図が伝わりやすくなります。
12.1 型安全にGSAPを利用する方法
型安全にGSAPを利用するには、アニメーション対象となるDOM要素に適切な型を付けることが重要です。たとえば、HTMLDivElement、HTMLButtonElement、SVGElementなど、対象要素に応じた型を指定します。ref.currentはnullになる可能性があるため、アニメーション実行前に存在確認を行います。
また、アニメーション設定を関数化する場合は、引数や戻り値にも型を付けると安全です。たとえば、特定の要素をフェードインする関数を作る場合、引数をElementやHTMLElementとして定義できます。型を明確にしておくことで、意図しない値を渡すミスを減らせます。
12.2 React + TypeScript構成で活用する方法
ReactとTypeScriptでGSAPを使う場合、useRefとuseGSAP()を組み合わせる構成が扱いやすいです。コンポーネント内の親要素にrefを付け、そのスコープ内の要素だけを対象にアニメーションを実行すれば、他コンポーネントへの影響を避けやすくなります。TypeScriptでは、refに適切なDOM型を指定しておくと安全です。
Next.jsなどのサーバーサイドレンダリングを含む環境では、クライアント側でのみアニメーションを実行する必要があります。GSAPはブラウザのDOMを扱うため、サーバー上では対象要素が存在しません。React + TypeScript構成では、クライアントコンポーネント内で実行する、マウント後に処理する、不要になったらクリーンアップするという基本を守ることが重要です。
12.3 アニメーション管理を効率化する方法
アニメーション管理を効率化するには、共通のアニメーション関数や設定を作成すると効果的です。たとえば、フェードイン、スライドイン、カード表示、セクション表示など、繰り返し使う演出を関数化しておけば、画面ごとに同じコードを書く必要がなくなります。TypeScriptで型を付けておけば、再利用時のミスも減らせます。
ただし、共通化しすぎると、個別の演出に対応しづらくなる場合があります。すべてを一つの汎用関数にまとめるのではなく、よく使う基本演出だけを共通化し、ページ固有の演出はコンポーネント内で管理する方が分かりやすいこともあります。アニメーションは見た目の調整が多いため、共通化と柔軟性のバランスが大切です。
13. GSAPが活用される開発シーン
GSAPは、動きの品質が重要なWeb制作やフロントエンド開発で活用されます。LP制作、ブランドサイト、キャンペーンサイト、SaaSのUI改善、プロダクト紹介ページ、ポートフォリオサイトなど、ユーザーの印象や操作体験を高めたい場面に向いています。特に、スクロール演出やタイムライン演出を使うページでは、GSAPの強みが発揮されます。
一方で、すべてのWebサイトにGSAPが必要なわけではありません。情報を素早く読ませることが最優先のページでは、過度なアニメーションは逆効果になることがあります。GSAPを導入する際は、演出がビジネス目的やユーザー体験に貢献するかを考え、必要な場所に適切な量だけ使うことが重要です。
13.1 LP制作でGSAPを活用する方法
LP制作では、ファーストビュー、セクション遷移、CTAボタン、商品説明、実績紹介などにGSAPを活用できます。たとえば、ヒーローコピーを順番に表示し、商品画像を滑らかに登場させ、CTAボタンを自然に目立たせることで、ユーザーの視線を誘導できます。LPでは短時間で価値を伝える必要があるため、動きの使い方が重要です。
ただし、LPではコンバージョンが目的になることが多いため、演出がCTAの妨げにならないように注意が必要です。ボタンが表示されるまで遅すぎる、スクロール演出が多すぎて情報に到達しづらい、動きが派手すぎて内容が頭に入らない、といった状態は避けるべきです。GSAPはユーザーを迷わせるためではなく、行動を後押しするために使うことが大切です。
13.2 Webサイト演出でGSAPを活用する方法
企業サイトやサービスサイトでは、スクロール時のフェードイン、画像のスライド、背景のパララックス、ナビゲーションの開閉、セクション間の演出などにGSAPを活用できます。特に、ブランドの世界観やサービスの特徴を印象的に伝えたい場合、適切なアニメーションは強い表現手段になります。
Webサイト演出では、サイト全体の一貫性が重要です。ページごとに動きの方向や速度がバラバラだと、ユーザーに違和感を与えます。たとえば、全体として下からふわっと表示する、重要なCTAだけ少し強調する、背景装飾はゆっくり動かすなど、ルールを決めておくと統一感が生まれます。GSAPを使う場合も、アニメーションガイドラインを作ると保守しやすくなります。
13.3 SaaSのUI改善でGSAPを活用する方法
SaaSのUIでは、過度な装飾よりも操作フィードバックとしてのアニメーションが重要です。たとえば、モーダルの表示、サイドバーの開閉、トースト通知、ステップ遷移、カードの並び替え、オンボーディングのガイド表示などにGSAPを活用できます。ユーザーが操作した結果を視覚的に理解しやすくすることで、使いやすさを高められます。
SaaSでは、業務効率や操作性が重視されるため、アニメーションは短く自然であるべきです。派手な演出よりも、状態変化を分かりやすく伝えることが目的になります。GSAPを使えば、UIの変化を滑らかに表現できますが、操作の待ち時間を増やさないよう、短時間で完了する設計が重要です。
13.4 ブランドサイトでGSAPを活用する方法
ブランドサイトでは、世界観や印象を伝えるために、GSAPの高度なアニメーションが活用されることがあります。ヒーロービジュアル、ロゴ演出、スクロールストーリー、画像の切り替え、タイポグラフィアニメーションなど、ブランドの個性を表現するための動きを作れます。静的なページでは伝えきれない雰囲気を演出できる点が魅力です。
ただし、ブランド表現を優先しすぎて、ユーザーが情報を探しにくくなることは避ける必要があります。ブランドサイトでも、会社情報、サービス内容、問い合わせ導線などの基本情報は分かりやすく表示するべきです。GSAPによる演出は、情報設計を補強するために使い、ユーザーの目的達成を邪魔しないように設計しましょう。
14. GSAPプラグイン活用法
GSAPには、基本機能に加えてさまざまなプラグインがあります。代表的なものとして、ScrollTrigger、MotionPathPlugin、Flip、Draggableなどがあります。これらを使うことで、スクロール連動、パスに沿った移動、状態遷移、ドラッグ操作など、より高度なインタラクションを実装できます。
プラグインを使う際は、必要なものだけを導入し、役割を明確にすることが重要です。便利だからといって多くのプラグインを使いすぎると、実装が複雑になり、保守しにくくなる場合があります。まずはGSAP本体とタイムラインで基本演出を作り、必要な表現が出てきた段階でプラグインを追加するのが現実的です。
14.1 ScrollTrigger活用法
ScrollTriggerは、スクロール位置に応じてアニメーションを制御するためのプラグインです。要素が画面に入ったタイミングでフェードインする、スクロール量に合わせて画像を動かす、セクションを固定してストーリーのように見せるなど、Webサイト演出で非常によく使われます。
ScrollTriggerを使う際は、スクロール体験を損なわないことが重要です。スクロールに合わせて要素を動かす演出は印象的ですが、ユーザーが自由に読み進められないほど強い演出はストレスになる場合があります。読みやすさと演出のバランスを取り、重要な情報が自然に目に入るように設計しましょう。
14.2 MotionPathPlugin活用法
MotionPathPluginは、要素を指定したパスに沿って動かすためのプラグインです。SVGパスに沿ってアイコンを移動させたり、キャラクターや装飾要素を曲線的に動かしたりする表現に向いています。直線的な移動だけでは表現しづらい、自然で印象的な動きを作れます。
MotionPathPluginを使うと、ブランドサイトやプロモーションページで視覚的に魅力的な演出を作れます。ただし、装飾的な動きが多くなりすぎると、ページの目的が分かりにくくなることがあります。パスに沿った動きは目を引くため、重要なストーリーや導線を補助するために使うと効果的です。
14.3 Flip活用法
Flipは、要素の状態変化を滑らかにアニメーションするためのプラグインです。レイアウト変更、カードの並び替え、リストから詳細表示への遷移、フィルターによる配置変更など、要素の位置やサイズが変わる場面で活用できます。状態の変化を自然につなげることで、ユーザーは画面で何が起きたのか理解しやすくなります。
Flipを使うと、UIの変化を単なる瞬間的な切り替えではなく、意味のある動きとして表現できます。たとえば、カード一覧から選択したカードが拡大して詳細表示になるような演出では、ユーザーがどの要素を開いたのかを直感的に理解できます。SaaSや管理画面でも、状態変化を分かりやすくする用途で役立ちます。
14.4 Draggable活用法
Draggableは、要素をドラッグ可能にするためのプラグインです。スライダー、カード並び替え、ドラッグ操作UI、インタラクティブなパネルなどに活用できます。通常のクリック操作だけでなく、ユーザーが直接要素を動かすような体験を作りたい場合に有効です。
ドラッグ操作を実装する際は、操作性とアクセシビリティに注意が必要です。マウス操作では使いやすくても、タッチデバイスやキーボード操作では扱いづらい場合があります。Draggableを使う場合は、代替操作や状態表示も考慮し、すべてのユーザーが必要な操作を行えるように設計することが重要です。
15. GSAP活用のベストプラクティス
GSAPを効果的に活用するには、過剰なアニメーションを避け、パフォーマンスを意識し、タイムラインで管理し、UI/UXを優先して演出を設計することが重要です。GSAPは非常に強力なライブラリですが、強力であるほど使いすぎには注意が必要です。アニメーションは目的を持って使うことで、初めてユーザー体験の向上につながります。
また、GSAPのコードは、ページやコンポーネントが増えるほど管理が難しくなることがあります。共通演出の関数化、タイムラインの整理、プラグイン登録の一元化、Reactでのクリーンアップ、レスポンシブ時の調整などを意識すると、長期的に保守しやすいアニメーション設計になります。
15.1 過剰なアニメーションを避ける
アニメーションは、ユーザーの理解や操作を助けるために使うべきです。すべての要素が動いたり、常に画面上で何かが動いていたりすると、ユーザーは情報に集中しにくくなります。特に、業務アプリやSaaSでは、派手な演出よりも操作の分かりやすさが重要です。
過剰なアニメーションを避けるためには、動かす目的を明確にすることが大切です。視線を誘導したいのか、状態変化を伝えたいのか、ブランド印象を高めたいのかによって、必要な動きは変わります。目的が説明できないアニメーションは削る、重要な要素だけに使う、短く自然な動きにする、という方針が有効です。
15.2 パフォーマンスを意識して設計する
GSAPを使う際は、パフォーマンスを意識した設計が重要です。transformやopacityを中心にアニメーションすることで、比較的滑らかに動かしやすくなります。一方、幅、高さ、余白、位置指定など、レイアウト再計算が発生しやすいプロパティを頻繁に動かすと、描画負荷が高くなる場合があります。
また、大量の要素を同時に動かす場合や、スクロール連動演出を多用する場合は、デバイスによって動作が重くなる可能性があります。PCでは問題なくても、スマートフォンではカクつくことがあります。実装後は複数デバイスで確認し、必要に応じてアニメーション数を減らす、表示対象を絞る、モバイルでは演出を簡略化するなどの対応を行いましょう。
15.3 Timelineを活用して管理する
複数のアニメーションを扱う場合は、タイムラインを活用して管理すると保守しやすくなります。個別にgsap.to()を並べるだけでは、演出の順番や重なりが分かりにくくなることがあります。タイムラインにまとめることで、演出全体の流れを一つの単位として把握できます。
タイムラインを使うと、後から演出の追加や調整を行いやすくなります。たとえば、ヒーローセクションに新しいサブコピーを追加した場合でも、タイムライン上の適切な位置にアニメーションを挿入できます。アニメーションが増えるプロジェクトほど、最初からタイムラインを意識して設計することが重要です。
15.4 UI/UXを優先して演出を設計する
GSAPを使った演出では、常にUI/UXを優先することが重要です。アニメーションは見た目を華やかにするためだけでなく、ユーザーに状態変化を伝えたり、次に見るべき場所へ視線を誘導したり、操作の結果を分かりやすくしたりする役割を持ちます。ユーザーの目的達成を支援する動きであるかを基準に設計しましょう。
たとえば、フォーム送信後に成功メッセージを自然に表示する、エラー箇所へ視線を誘導する、メニューの開閉を滑らかにする、といった演出はUX向上に直結します。一方で、長すぎるページ遷移や読みにくい文字アニメーションは、ユーザーの邪魔になる可能性があります。GSAPの表現力を活かしながらも、最終的には使いやすさを優先することが大切です。
おわりに
GSAPは、JavaScriptで高性能かつ柔軟なWebアニメーションを実装できる強力なライブラリです。gsap.to()、gsap.from()、gsap.fromTo()といった基本メソッドを使うことで、移動、フェード、拡大縮小、回転などの基本的な動きを簡単に作成できます。さらに、タイムラインを使えば、複数のアニメーションを一つの流れとして管理でき、複雑な演出も整理しやすくなります。
また、ScrollTriggerを使ったスクロール連動アニメーション、MotionPathPluginによるパス移動、Flipによる状態遷移、Draggableによるドラッグ操作など、プラグインを活用することで表現の幅を大きく広げられます。ReactやTypeScriptとも組み合わせやすく、コンポーネント単位でアニメーションを管理することで、現代的なフロントエンド開発にも対応できます。
一方で、GSAPは強力だからこそ、使いすぎには注意が必要です。アニメーションはユーザー体験を高めるための手段であり、情報の理解や操作を妨げるものであってはいけません。過剰な演出を避け、パフォーマンスに配慮し、UI/UXを優先して設計することで、GSAPの価値を最大限に活かせます。WebサイトやWebアプリに自然で印象的な動きを加えたい場合、GSAPは非常に有力な選択肢となるでしょう。
