【JavaScript】アニメーションライブラリ「GSAP」の使い方

Web制作においてリッチなアニメーションを実装する場合、JavaScript ライブラリ「GSAP（GreenSock Animation Platform）」は非常に強力です。CSS アニメーションや jQuery アニメーションよりも柔軟で、高速かつ滑らかな動きを実現できます。本記事では GSAP の導入方法から基本的な使い方、応用的なアニメーション手法までを解説します。

GSAPの導入方法
基本的なアニメーション（to / from / fromTo）
タイムラインを使った連続アニメーション
スクロール連動アニメーション（ScrollTrigger）
イージングの活用
まとめ

GSAPの導入方法

GSAP は CDN を利用して読み込む方法と、npm/yarn でインストールする方法があります。簡単に試す場合は CDN がおすすめです。

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

Node.js 環境で利用する場合は以下を実行します。

npm install gsap

基本的なアニメーション（to / from / fromTo）

GSAP では gsap.to() を使って要素を指定した状態へアニメーションさせます。

// 要素を右に100px移動し、透明度を0にする
gsap.to(".box", { x: 100, opacity: 0, duration: 1 });

逆に gsap.from() を使うと、指定した状態から現在のスタイルに遷移します。

// 初期状態を透明＆下方向にしてからフェードイン＋上に移動
gsap.from(".box", { y: 50, opacity: 0, duration: 1 });

fromTo() を使うと開始と終了の両方を指定できます。

gsap.fromTo(".box",
  { opacity: 0, x: -100 },
  { opacity: 1, x: 0, duration: 1 }
);

タイムラインを使った連続アニメーション

複数のアニメーションを順番に実行したい場合は gsap.timeline() を利用します。

const tl = gsap.timeline();

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

タイムラインを使うと、アニメーションを直列・並列に管理できるため複雑な演出を簡単に制御できます。

スクロール連動アニメーション（ScrollTrigger）

GSAP 公式プラグイン ScrollTrigger を使うと、スクロール位置に応じてアニメーションを発火させられます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>

gsap.registerPlugin(ScrollTrigger);

gsap.to(".box", {
  x: 300,
  duration: 2,
  scrollTrigger: {
    trigger: ".box",
    start: "top 80%", // 発火位置
    end: "top 30%",
    scrub: true       // スクロールに追従
  }
});

イージングの活用

GSAP では動きの緩急を簡単に指定できます。ease プロパティに文字列を指定します。

gsap.to(".ball", {
  y: 200,
  duration: 1.5,
  ease: "bounce.out"
});

まとめ

GSAP は以下の特徴を持ち、リッチな Web アニメーションを作る際に最適です。

to / from / fromTo による直感的な指定
timeline でのアニメーション管理
ScrollTrigger によるスクロール連動演出
豊富なイージングで自然な動きを表現可能

CSS だけでは表現が難しい複雑なアニメーションも、GSAP を導入すれば効率的に実装できます。サイトやアプリに動きを加えたいときはぜひ活用してみましょう。