サイトにアニメーションをつける方法【GSAP】

この記事の前提条件

対象: GSAP(GreenSock Animation Platform) 最新版
難易度: ★★☆
所要時間: 約15分

スクロールに合わせて要素がふわっと現れたり、複数の要素が順番にずれて動いたり…CSSのtransitionやanimationだけでは表現しきれない、凝ったアニメーションを見かけたことはありませんか？そういったリッチな動きの多くは、「GSAP(GreenSock Animation Platform)」というJavaScriptライブラリで作られています。

⚠️ 2025年に「完全無料化」した、という大きな変化

GSAPは以前、SplitTextやMorphSVGなど一部の高機能なプラグインが「Club GreenSock」という有料会員限定でした。ですが、2024年にノーコードツールのWebflowがGSAPを買収し、2025年4月末をもって、これらの有料プラグインも含めて全ての機能が商用利用も含め完全無料になりました。「GSAPは一部有料」という情報は現在では古い情報なので注意してください。

目次非表示

CDNを読み込むだけで導入できる
基本の書き方: gsap.to()で要素を動かす
スクロール連動アニメーションはScrollTrigger
実務での注意点: CSSでできることはCSSでやる
まとめ

目次へ

CDNを読み込むだけで導入できる

npmでのインストールも可能ですが、まず動きを試してみたいだけなら、<head>にCDNのscriptタグを1行追加するだけで導入できます。ビルド環境の準備は不要です。

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

基本の書き方: gsap.to()で要素を動かす

一番よく使うのがgsap.to()です。「対象の要素」と「最終的にどんな状態にするか」を指定するだけで、現在の状態からその状態まで自動でアニメーションしてくれます。

gsap.to(".box", {
  x: 300,       // 右に300px移動
  rotation: 360, // 1回転
  duration: 1.5, // 1.5秒かけて
  ease: "power2.out" // 動きの緩急
});

CSSのtransitionと違い、JavaScriptから動的に呼び出せるので、「ボタンを押したら動く」「特定の条件を満たしたら動く」といった、状況に応じたアニメーションを組みやすいのが特徴です。

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

近年のWebサイトで特によく見る「スクロールすると要素がふわっと出てくる」演出は、GSAPのScrollTriggerプラグインで実装します。前述の通り現在は無料で使えるプラグインです。

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

<script>
gsap.registerPlugin(ScrollTrigger);

gsap.to(".fade-in", {
  opacity: 1,
  y: 0,
  duration: 1,
  scrollTrigger: {
    trigger: ".fade-in",
    start: "top 80%", // 要素の上端が画面の80%位置に来たら発火
  }
});
</script>

start: "top 80%"は「要素の上端が、画面の上から80%の位置(=画面下寄り)に到達したタイミング」でアニメーションを開始する、という意味です。この値を調整することで、アニメーションが始まるタイミングを細かく制御できます。

実務での注意点: CSSでできることはCSSでやる

GSAPは強力ですが、単純なホバーの色変化程度なら、わざわざJavaScriptライブラリを読み込むまでもなく、CSSのtransitionだけで十分です。GSAPはJavaScriptファイルの読み込みが発生する分、CSSだけの実装よりページの表示は重くなります。「スクロール連動」「複数要素を連携させた複雑な動き」など、CSSだけでは実現しづらい演出に絞って使うのが実務でのバランスの取り方です。

まとめ

GSAPは2025年4月末以降、有料プラグインも含めて完全無料で商用利用できるようになった
CDNのscriptタグ1行で導入でき、ビルド環境がなくても試せる
基本はgsap.to()で「最終状態」を指定するだけでアニメーションできる
スクロール連動の演出はScrollTriggerプラグインで実装する
単純なホバー演出はCSSで十分。GSAPは複雑な動きに絞って使うのがバランスが良い