はじめに

おしゃれなサイトで見かける複雑なアニメーション。

「実装が難しそう…」と感じるかもしれませんが、GSAPを使えば驚くほど簡単に動きのあるサイトが作れます。

今回はGSAPの導入方法や基本的な使い方をご紹介します！

GSAPとは？

GSAP（GreenSock Animation Platform）は、JavaScriptで高度なアニメーションを実現するための軽量・多機能なライブラリです。

CSSアニメーションでは限界がある複雑な動きも、GSAPの記法を覚えるだけで直感的に実装できます。

GSAPの導入方法

プロジェクトへの組み込み方は主に3つありますが、サクッと試すならCDNがおすすめです。

1. CDNで読み込む

</body>タグの直前に以下のコードを貼り付けるだけで準備完了です。

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

2. npmでインストール

Node.js環境であれば、以下のコマンドでインストールし、JSファイルでインポートします。

npm install gsap

import { gsap } from "gsap";

基本的な書き方

例えば、要素を右に300px動かすコードはこれだけです。

// gsap.メソッド("ターゲット", { プロパティ: 値, duration: 時間 });
gsap.to(".box", {
  x: 300,
  duration: 1 // 1秒かけて移動
});

※v3からは、時間は第2引数ではなくオプション内に duration として書くのが推奨されています。

主要メソッド一覧

よく使う4つのメソッドをマスターしましょう。

メソッド	役割
to()	「現在の状態」から「指定した状態」へ変化
from()	「指定した状態」から「現在の状態」へ変化
fromTo()	「開始の状態」と「終了の状態」を両方指定
set()	即座に状態を変更（アニメーションなし）

表現を広げるアニメーションのサンプル

CSSのtransitionと同じように、様々なプロパティを組み合わせて動きをつけられます。

scale（拡大）/ rotate（回転）: 要素を大きくしたり回したりします。
opacity（不透明度）: 0から1へ変化させ、y軸の移動と組み合わせることで「ふわっと浮き上がる」演出が作れます。
repeat: 値を -1 に設定すると、アニメーションを無限に繰り返します。

Timeline：連続した動きを作る

複数のアニメーションを順番に実行したい時は gsap.timeline() が非常に便利です。

const tl = gsap.timeline({ repeat: -1 }); // 無限ループ

tl.to(".box", { x: 100, rotate: 360, duration: 1 })
  .to(".box", { y: 100, scale: 1.5, duration: 1 })
  .to(".box", { x: 0, opacity: 0, duration: 1 });

Timelineのメリット: 通常なら「1つ目が終わる秒数を計算して2つ目を遅延させて…」という面倒な計算が必要ですが、Timelineなら書いた順に実行されるので管理が劇的に楽になります。

まとめ

今回はGSAPの基本をご紹介しました。これらを組み合わせるだけで、サイトのクオリティは一気に上がります。

さらに発展的なスクロール連動アニメーション（ScrollTrigger）についても別記事で解説しているので、ぜひチェックしてみてください！

【GSAP】初心者でも簡単！導入からアニメーション作成まで徹底解説