GSAPとは？Web制作で使えるアニメーションライブラリの基本と実装方法

2025年5月26日

はじめに

Web制作でアニメーションを実装したいけれど、CSSだけでは限界を感じていませんか。

複雑な動きやタイムライン制御が必要な場面で、多くの制作者が選ぶのがGSAP（GreenSockAnimationPlatform）です。

GSAPは高性能なJavaScriptアニメーションライブラリで、軽量でありながら豊富な機能を持っています。

この記事では、GSAPの基本概念から実装方法まで、実際のコード例を交えながら解説します。

GSAPとは何か

GSAPは2008年にリリースされたアニメーションライブラリで、現在も活発に開発が続けられています。Adobe、Google、Microsoft、Netflixなど多くの大手企業で採用されており、Web制作業界では事実上の標準となっています。

GSAPの特徴

高いパフォーマンス
GSAPはブラウザの最適化技術を活用し、60FPSでスムーズなアニメーションを実現します。CSSアニメーションと比較しても、多くの場面でより高速に動作します。

豊富な機能
基本的なプロパティアニメーションから、SVGアニメーション、3D変換、モーフィングまで幅広く対応しています。プラグインシステムにより、必要な機能だけを選択して使用できます。

直感的なAPI
シンプルで分かりやすいメソッドチェーンにより、複雑なアニメーションも短いコードで記述できます。学習コストが低く、初心者でも扱いやすい設計になっています。

GSAPの基本的な使い方

インストールと読み込み

GSAPを使用するには、CDNから読み込むかnpmでインストールします。

<!--CDNから読み込む場合-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>`

#npmでインストールする場合
npm install gsap

基本的なアニメーション

最もシンプルなアニメーションから始めます。

JavaScriptファイルに以下を記述してみてください：

//要素を2秒かけて右に100px移動
gsap.to(".box",{duration:2,x:100});

gsap.to()メソッドは、現在の状態から指定した値まで変化させます。第一引数にセレクタまたは要素、第二引数にアニメーションの設定を渡します。

以下のように複数のアニメーションを実行することも可能です：

//複数のプロパティを同時にアニメーション
gsap.to(".box",{
duration:2,
x:100,
y:50,
rotation:360,
scale:1.5,
});

以下は、GSAPでよく使うプロパティや機能です。

スクロールできます

カテゴリ	プロパティ名	説明
基本アニメーション	`x`, `y`	X軸・Y軸への移動（pxや%）
	`rotation`	回転（単位: 度）
	`scale`, `scaleX`, `scaleY`	拡大・縮小（1 = 等倍）
	`opacity`	透明度（0〜1）
	`autoAlpha`	opacity + visibility制御
時間制御	`duration`	アニメーションの時間（秒）
	`delay`	開始までの遅延（秒）
	`repeat`	繰り返し回数（-1で無限）
	`repeatDelay`	繰り返しの間の遅延
	`yoyo`	往復アニメーション（trueで有効）
動きの質（イージング）	`ease`	動きの緩急（例: `"power2.out"`, `"bounce"`）
	`transformOrigin`	拡大や回転の基準点（例: `"center center"`）
CSSプロパティの変化	`backgroundColor`	背景色の変更
	`color`	文字色の変更
	`width`, `height`	要素の幅・高さ変更
	`border`, `margin`, `padding`	各CSSプロパティも指定可能（ただし数値化できるもの）
イベントフック	`onStart`	アニメーション開始時の関数
	`onUpdate`	アニメーション中の更新時の関数
	`onComplete`	終了時の関数
スクロール連動（ScrollTrigger）	`scrollTrigger`	スクロールに応じて発火させる設定オブジェクト（別途プラグイン必要）

アニメーションの種類

GSAPには3つの基本メソッドがあります。

gsap.to()
現在の状態から指定した値へアニメーション

gsap.from()
指定した値から現在の状態へアニメーション

gsap.fromTo()
開始値と終了値を両方指定

//透明から不透明へフェードイン
gsap.from(".fade-in", { duration: 1, opacity: 0 });

//開始と終了を明確に指定
gsap.fromTo(
  ".slide",
  { x: -100, opacity: 0 },
  { duration: 1, x: 0, opacity: 1 }
);

タイムラインでアニメーションを制御

複数のアニメーションを順序立てて実行したい場合、タイムラインを使用します。

基本的なタイムライン

const tl = gsap.timeline();

tl.to(".box1", { duration: 1, x: 100 })
  .to(".box2", { duration: 1, y: 100 })
  .to(".box3", { duration: 1, rotation: 360 });

この例では、box1のアニメーションが完了してからbox2、その後box3のアニメーションが実行されます。

同時実行とオフセット

const tl = gsap.timeline();
tl.to(".box1", { duration: 1, x: 100 }, 1)
  .to(".box2", { duration: 1, y: 100 }, 1)
  .to(".box3", { duration: 1, rotation: 360 }, 2);

第三引数にタイミングを指定することで、アニメーションの開始時間を制御できます。

イージングとアニメーションカーブ

アニメーションの動きに変化をつけるため、イージング（緩急）を設定できます。

//デフォルトのイージング
gsap.to(".box",{duration:2,x:100,ease:"power2.out"});

//バウンス効果
gsap.to(".box",{duration:2,x:100,ease:"bounce.out"});

//カスタムベジェ曲線
gsap.to(".box",{
duration:2,
x:100,
ease:"cubic-bezier(0.25,0.46,0.45,0.94)",
});

GSAPには30種類以上のプリセットイージングが用意されており、自然な動きを簡単に実現できます。

スクロールトリガー

ScrollTriggerプラグインを使用すると、スクロール位置に応じたアニメーションが可能です。

<!doctype html>
<html lang="ja">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite App</title>
</head>

<body>
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
  <script type="module" src="/src/main.js"></script>
</body>

</html>

//ScrollTriggerプラグインを登録
gsap.registerPlugin(ScrollTrigger);

//要素が画面に入ったらアニメーション
gsap.to(".box2", {
  scrollTrigger: {
    trigger: ".box2",
    start: "top 80%", // 要素の上端が画面の80%位置に来たら開始
    end: "top 30%", // 要素の上端が画面の30%位置に来たら終了
    scrub: true, // スクロールに合わせてアニメーション
  },
  x: 300,
  rotation: 360,
  duration: 2,
});