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

はじめに

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

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

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

特徴・メリット

パフォーマンスが段違い

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>

基本的な使い方

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

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

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

実践的なユースケース

スクロール連動のフェードイン

ページをスクロールしたときに要素がふわっと現れる、よくあるやつです。

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

ホバーエフェクト

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