はじめに

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,
});

まとめ

GSAPは学習コストが低く、高機能なアニメーションライブラリです。基本的なto()、from()、fromTo()メソッドから始めて、タイムラインやプラグインを活用することで、プロフェッショナルなアニメーションを実装できます。

まずは簡単なアニメーションから始めて、徐々に複雑な表現にチャレンジしてみてください。