GSAP（GreenSock）でWebアニメーションが劇的に変わる話

はじめに

Webサイトにアニメーションを入れたいとき、どうしてますか。CSSアニメーションで頑張る、jQueryのanimate()を使う、あるいはReact系のライブラリに頼る...選択肢はいろいろあるんですよね。

個人的には、ここ数年GSAP（GreenSock Animation Platform）一択になってます。正直なところ、これを知ってからCSSアニメーションの複雑な記述に苦しむことがなくなりました。

GSAPは13年以上の歴史を持つ老舗のアニメーションライブラリで、GitHubスター数は23,000以上。月間500万ダウンロードという数字が、その信頼性を物語っています。そして最近、Webflowとのパートナーシップにより全機能が完全無料になったんですよ。これ、意外と知られていない。

とはいえ、説明を読むより実際に触った方が早いと思います。ボタンを押すとgsap.to()でボックスが動き出すサンプルを用意したので、先に挙動を見たい方はこちらからどうぞ。

＞＞＞まずはサンプルを確認＜＜＜

特徴・メリット

パフォーマンスが段違い

GSAPの最大の売りは速度です。公式によるとjQuery比で最大20倍高速とのこと。実際に使ってみると、60fpsでヌルヌル動くアニメーションが簡単に作れます。

重いアニメーションを入れてサイトがカクつく...という経験、30代エンジニアなら一度はあるはず。GSAPならその心配がほぼなくなります。

フレームワーク非依存

React、Vue、Svelte、素のHTML...どんな環境でも動きます。これが地味にありがたい。プロジェクトごとに技術スタックが違っても、アニメーション部分は同じ書き方でいけるんですよね。

ScrollTriggerが神

スクロール連動アニメーションを作るなら、ScrollTriggerプラグインが本当に便利です。以前は別売りだったんですが、今は無料。スクロール位置に応じた表示制御やパララックス効果が、数行のコードで実現できます。

学習コストが低い

APIがシンプルで直感的なので、基本的な使い方は30分あれば覚えられます。公式ドキュメントも充実していて、日本語の情報も増えてきました。

インストール方法

npm / yarn

npm install gsap

yarn add gsap

CDN

手軽に試したいならCDNが楽です。

<script src="https://cdn.jsdelivr.net/npm/gsap@3.14/dist/gsap.min.js"></script>

ScrollTriggerも使うなら追加で読み込みます。

<script src="https://cdn.jsdelivr.net/npm/gsap@3.14/dist/ScrollTrigger.min.js"></script>

GSAPのサンプルを動かす

GSAPの基本はgsap.to()です。第一引数にセレクタ、第二引数にx・opacity・duration・easeなどのプロパティを渡すだけで、対象要素がその状態に向かってなめらかにアニメーションします。以下は「アニメーション再生」ボタンを押すとボックスが右へ移動しながらフェードインする最小構成です。

import gsap from 'gsap';

// x方向に220px移動しながらフェードイン
gsap.to('.box', {
  x: 220,
  opacity: 1,
  duration: 1,
  ease: 'power2.out'
});

// easeを変えるだけで動きの質感が変わる
gsap.to('.box', {
  x: 220,
  ease: 'bounce.out'
});

下のサンプルは実際に編集・実行できます。「アニメーション再生」でボックスが動き、「リセット」で元の位置に戻ります。easeのプルダウンを切り替えてから再生すると、gsap.to()が受け取るeaseオプションだけで動きの質感がどう変わるかを確認できます。

easeをbounce.outやelastic.out(1, 0.3)に切り替えて再生すると、同じx: 220の移動量でも弾んだり揺れたりと印象が大きく変わることが分かります。durationの数値を大きくするほどゆっくり、小さくするほど素早い動きになります。

基本的な使い方

要素をアニメーションさせる

import gsap from 'gsap';

// 要素を右に200px移動しながらフェードイン
gsap.to('.box', {
  x: 200,
  opacity: 1,
  duration: 1,
  ease: 'power2.out'
});

gsap.to()が基本メソッドです。第一引数にセレクタ、第二引数にアニメーション設定を渡すだけ。CSSで@keyframesを書くよりずっとシンプルなんですよね。

from / fromTo

// 初期状態から現在の状態へアニメーション
gsap.from('.box', {
  y: -100,
  opacity: 0,
  duration: 0.8
});

// 任意の状態間でアニメーション
gsap.fromTo('.box',
  { x: 0, opacity: 0 },
  { x: 100, opacity: 1, duration: 1 }
);

タイムラインで連続アニメーション

const tl = gsap.timeline();

tl.to('.box1', { x: 100, duration: 0.5 })
  .to('.box2', { y: 50, duration: 0.5 })
  .to('.box3', { rotation: 360, duration: 0.8 });

タイムラインを使えば、複数のアニメーションを順番に、あるいは同時に実行できます。これが本当に便利で、複雑な演出も管理しやすくなります。

実践的なユースケース

GSAPのタイムラインで演出を組み立てる

gsap.to()単体では1つのアニメーションしか扱えませんが、gsap.timeline()を使うと複数のトゥイーンを.from()や.to()のチェーンで順番に、あるいは時間をずらして重ねながら連結できます。カードが「タイトル→本文→ボタン」の順に出現するような演出はこの書き方が定番です。

import gsap from 'gsap';

const tl = gsap.timeline();

tl.from('.card-title', { y: -20, opacity: 0, duration: 0.4 })
  .from('.card-body', { y: 20, opacity: 0, duration: 0.4 }, '-=0.2')
  .from('.card-btn', { y: 20, opacity: 0, duration: 0.4 }, '-=0.2');

下のサンプルは「タイムライン再生」ボタンを押すと、gsap.timeline()のチェーンに沿ってカードのタイトル・本文・ボタンが順番に浮かび上がります。

'-=0.2'の数値を大きくするほど前のトゥイーンとの重なりが強くなり、0にすると完全に順番待ちの直列再生になります。.to()ではなく.from()を使っているので、CSSを書き換えなくても「現在のスタイルへ向かって戻ってくる」動きが作れる点もポイントです。

GSAPのScrollTriggerで作るスクロール連動フェードイン

ページをスクロールしたときに要素がふわっと現れる、よくあるやつです。GSAPではgsap.registerPlugin(ScrollTrigger)でプラグインを登録したあと、トゥイーンのscrollTriggerオプションに監視対象（trigger）と発火位置（start）を指定するだけで実現できます。

import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

gsap.from('.fade-in-section', {
  y: 50,
  opacity: 0,
  duration: 0.8,
  stagger: 0.2,
  scrollTrigger: {
    trigger: '.fade-in-section',
    start: 'top 80%',
    toggleActions: 'play none none none'
  }
});

staggerを使うと複数要素を順番にアニメーションさせられます。コーポレートサイトのセクション表示とかで重宝します。

下のサンプルは、枠内（#scroller）をスクロールするとScrollTriggerが発火してパネルがフェードインする実装です。ページ全体ではなく特定の要素をスクロールコンテナにしたい場合は、scrollTrigger.scrollerにそのセレクタを渡します。

toggleActions: 'play none none reverse'により、下にスクロールして再表示されたパネルを上にスクロールし直すと元の状態へ戻ります。start: 'top 90%'の90%を小さくするほど、より画面の上寄りまでスクロールしないとアニメーションが始まらなくなります。

ホバーエフェクト

const cards = document.querySelectorAll('.card');

cards.forEach(card => {
  card.addEventListener('mouseenter', () => {
    gsap.to(card, {
      scale: 1.05,
      boxShadow: '0 10px 30px rgba(0,0,0,0.2)',
      duration: 0.3
    });
  });

  card.addEventListener('mouseleave', () => {
    gsap.to(card, {
      scale: 1,
      boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
      duration: 0.3
    });
  });
});

Reactでの使用例

import { useEffect, useRef } from 'react';
import gsap from 'gsap';

export const AnimatedBox = () => {
  const boxRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (boxRef.current) {
      gsap.from(boxRef.current, {
        opacity: 0,
        y: 20,
        duration: 0.6,
        ease: 'power2.out'
      });
    }
  }, []);

  return <div ref={boxRef}>アニメーションする要素</div>;
};