LoginSignup
7
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@y-saito993in株式会社セレス

GSAPガイド：Webデザイナーのための簡単アニメーションライブラリ！

Last updated at Posted at 2025-05-15

GSAP：Webデザイナーのためのアニメーション入門

この記事の目的＆対象

目的

  • GSAPの基本パラメータを押さえ、カンタンにアニメーションを実装する
  • 主要プラグインと使いどころをサッと理解する

対象

  • HTML/CSSの基礎がある方
  • WEBサイトにアニメーションを組み込みたい方

はじめに

GSAP（GreenSock Animation Platform）は、高性能で自由度の高いJavaScriptアニメーションライブラリです。
2025年4月、Webflowのスポンサーにより、これまで有料だった高機能プラグインを含む全機能が完全無料化されました。

【情報ソース】2025年4月30日、Webflow公式ブログにて全GSAP機能の無償開放が発表。
※公式ブログ：https://webflow.com/blog/gsap-becomes-free

「どのパラメータをいじればいいんだ…？」と迷うことがないよう、本記事では指定可能なパラメータと主要プラグインの一覧を、実例とともにまとめています。

GSAPとは

GSAPってなに？

GSAPは、Webページ上の要素を簡単にアニメーションさせることができるJavaScriptライブラリです。短く直感的なコードで、スライドやフェード、ズーム、回転といった基本的な動きから、テキスト演出、スクロール連動、SVGアニメーション、レイアウト遷移といった複雑な表現まで、リッチで多彩なアニメーションを実現できます。その柔軟性と拡張性により、Web上でのビジュアル表現の可能性は無限大です。

GSAPでできること

  • スライド：x/yパラメータ
  • フェード：opacity
  • ズーム：scale
  • 回転：rotation
  • テキストアニメ：SplitTextプラグイン
  • スクロール連動：ScrollTriggerプラグイン
  • SVGアニメ：MorphSVG/DrawSVGプラグイン
  • レイアウト遷移：Flipプラグイン

導入方法

1. CDN導入

<!-- GSAP本体（必須） -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>

<!-- プラグインを使う場合は必要に応じて追加 -->
<!-- 例：ScrollTriggerを使いたい場合 -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>

☑️ 補足
gsap.min.js は必ず必要ですが、各プラグイン（ScrollTrigger, SplitText, MorphSVG など）は使いたいものだけ個別に読み込む形式です。すべてのプラグインを読み込む必要はありません。

下記URLから使いたい機能にチェックを入れると必要なCDNの記述がコピーできます。

2. npm導入

npm install gsap

import { gsap } from "gsap"
import { ScrollTrigger } from "gsap/ScrollTrigger"
// 必要なプラグインを登録
gsap.registerPlugin(ScrollTrigger)

下記URLから使いたい機能にチェックを入れると必要なnpm記述がコピーできます。

GSAPの基本構文

メソッド 意味
gsap.from() 指定した開始状態 → 現在状態
gsap.to() 現在 → 指定した終了状態
gsap.fromTo() 指定開始状態 → 指定終了状態

例：フェードイン（from）

gsap.from(".box", {
  opacity: 0,           // 最初は透明な状態から
  duration: 1,          // アニメーションの再生時間は1秒
  ease: "power2.out"    // ゆっくり始まり、なめらかに終了するイージング
});

chrome-capture-2025-5-12x500.gif

例：スライドアウト（to）

gsap.to(".box", {
  x: 200,              // 右方向に200px移動
  opacity: 0,          // 最終的に透明になる
  duration: 0.8,       // アニメーションの再生時間は0.8秒
  ease: "power1.in"    // すばやく加速して一気に終わる動き
});

chrome-capture-2025-5-12-x500.gif

例：往復アニメーション（fromTo）

gsap.fromTo(".box",
  { 
    x: -100,         // 左に100pxずれた位置から開始
    opacity: 0       // 最初は透明
  },
  { 
    x: 100,          // 右に100pxの位置まで移動
    opacity: 1,      // 最終的に不透明になる
    duration: 2,     // アニメーション時間は2秒
    repeat: -1,      // 無限に繰り返す
    yoyo: true       // 行ったあと逆方向に戻る（往復アニメーション）
  }
);

chrome-capture-2025-5-12 (3).gif

GSAPで指定できる主なパラメータ

どの動きを細かく制御したいときに触るべきパラメータをカテゴリ別に整理しました。

カテゴリ パラメータ 説明
位置 x, y オフセット位置（pxまたは%）
透明度 opacity 0（透明）〜1（不透明）
大きさ scale, scaleX, scaleY 拡大・縮小
回転 rotation, rotationX, rotationY 角度（deg）
色・背景 backgroundColor, color CSSカラー
サイズ・形状 width, height, borderRadius 要素サイズ、角丸
フィルター filter, blur, brightness CSSフィルター
時間制御 duration, delay, repeat, repeatDelay, yoyo 時間、遅延、繰り返し
動きの緩急 ease イージング（例："power2.out"）
連携制御 stagger, onStart, onUpdate, onComplete 要素を順番に動かす、コールバック設定
クリア clearProps アニメ終了後にスタイルをリセット

Point：まずは duration / delay / ease に慣れ、そのあと stagger や repeat を試すとスムーズです。

GSAPの主要機能＆プラグイン（徹底解説）

ScrollTrigger（スクロール連動）

<!-- CDN読み込みが必要 -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>

gsap.registerPlugin(ScrollTrigger);  // ScrollTrigger プラグインを登録

gsap.from(".section", {
  scrollTrigger: {
    trigger: ".section",              // スクロールを監視する要素
    start: "top 80%",                 // 要素の上端がビューポートの80%位置に来たとき開始
    end: "bottom 20%",                // 要素の下端がビューポートの20%位置に来たとき終了
    toggleActions: "play pause resume reset", // スクロールに応じた動作
    markers: true                     // デバッグ用マーカーを表示（start/end位置）
  },
  y: 50,                              // 下に50pxずれた位置から
  opacity: 0,                         // 透明な状態から
  duration: 1                         // 1秒でアニメーション
});

ScrollTrigger の4つのスクロールタイミング

toggleActions: "1:onEnter 2:onLeave 3:onEnterBack 4:onLeaveBack"

1 onEnter　→ 下にスクロールして要素が画面に入ったとき（start を通過）
2 onLeave　→ 下にスクロールして要素が画面から出たとき（end を通過）
3 onEnterBack　→ 上にスクロールして要素が再び画面に入ったとき（end を戻った）
4 onLeaveBack　→ 上にスクロールして要素が画面から消えたとき（start を戻った）

設定項目 動作内容
play 再生
pause 一時停止
resume 再開
reset 最初の状態に戻す
none 指定なし
  • トリガー要素が画面に入った／出たタイミングで自在に制御可能です

chrome-capture-2025-5-12-(3).gif

参考記事：GSAPのScrollTriggerでスクロールアニメーションを実装する方法
https://gri-t.com/gsap-scroll-trigger/

Timeline（シーケンス制御）

// タイムラインを作成（すべてのアニメーションに duration: 0.8秒, ease: "power1.out" を適用）
const tl = gsap.timeline({ defaults: { duration: 0.8, ease: "power1.out" } });

tl.from(".box01", { 
  y: 50,            // 下から50pxの位置から
  opacity: 0        // 透明な状態から
})
.from(".box02", { 
  x: -100,          // 左から100pxずれた位置から
  opacity: 0 
}, "-=0.4")         // 前のアニメーションの終了0.4秒前から開始
.from(".box03", { 
  scale: 0,         // 拡大0（小さい状態）から
  opacity: 0 
}, "-=0.4");        // これも前のアニメーションと0.4秒重ねて始める
  • 複数アニメーションをまとめて管理。同期やズラすことができます

chrome-capture-2025-5-12 (5).gif

Stagger（間隔をあける）

gsap.from(".item", {
  opacity: 0,       // 最初は透明な状態から
  y: 20,            // 下に20pxずれた位置から開始
  stagger: 0.35,    // 各.itemが0.35秒ずつずれて順番に再生
  duration: 0.8     // 各アニメーションの時間は0.8秒
});
  • リストやグリッドの要素を、少しずつタイミングをズラせます

chrome-capture-2025-5-12 (4).gif

SplitText（文字分解アニメ）

<!-- CDN読み込みが必要 -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/SplitText.min.js"></script>

gsap.registerPlugin(SplitText);  // SplitTextプラグインを有効化（CDN読み込み必須）

// .heading 要素のテキストを「文字」と「単語」に分解
const split = new SplitText(".heading", { type: "chars, words" });

// 各文字（chars）を順番にアニメーション
gsap.from(split.chars, {
  opacity: 0,       // 最初は透明
  y: 20,            // 下に20pxずれた位置から登場
  stagger: 0.05,    // 各文字が0.05秒ずれて順にアニメーション
  duration: 0.6     // 各文字のアニメーション時間は0.6秒
});
  • 見出しやキャッチコピーを1文字ずつ、1単語ずつ登場させられます

chrome-capture-2025-5-12 (6).gif

MorphSVG（形状変形）

<!-- CDN読み込みが必要 -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/MorphSVGPlugin.min.js"></script>

<svg viewBox="0 0 200 200">
  <path id="circle" d="M100,50 a50,50 0 1,0 0.01,0" />
  <path id="star" d="M100,30 L117,78 L170,78 L126,112 L143,160 L100,130 L57,160 L74,112 L30,78 L83,78 Z" style="display:none;" />
</svg>

gsap.registerPlugin(MorphSVGPlugin); // MorphSVGPlugin を有効化（SVGの形を変形させる）

gsap.to("#circle", {
  morphSVG: "#star",         // #circle のパスを #star の形に変形させる
  duration: 1.5,             // アニメーション時間は 1.5秒
  ease: "power2.inOut"       // ゆっくり始まり、ゆっくり終わる自然な動き
});
  • SVGを、滑らかに別の形へトランジションします

chrome-capture-2025-5-12 (7).gif

☑️補足
#circle と #star はSVGの <path>である必要があります。

Flip（レイアウト遷移）

<!-- CDN読み込みが必要 -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/Flip.min.js"></script>

.card {
  width: 150px;
  height: 150px;
  background-color: #6495ed;
  border-radius: 10px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.card.expanded {
  width: 300px;
  height: 300px;
  background-color: #ff7f50;
}

gsap.registerPlugin(Flip);  // Flipプラグインを登録（有効化）

const state = Flip.getState(".card");  
// 変更前の .card の位置・サイズ・状態を記録

document.querySelector(".card").classList.toggle("expanded");  
// .card に "expanded" クラスを付け外し（スタイル変化をトリガー）

Flip.from(state, { 
  duration: 0.8,             // アニメーション時間（0.8秒）
  ease: "power2.inOut"       // ゆっくり始まり、ゆっくり終わる自然な動き
});
// 変更前後の差をもとに、なめらかに変化をアニメーションで再現
  • ある要素の位置・サイズ・形状が変わったときに、その変化をなめらかにつないで見せることができます

chrome-capture-2025-5-12-(10).gif

DrawSVG（パス描画）

<!-- CDN読み込みが必要 -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/DrawSVGPlugin.min.js"></script>

<svg viewBox="0 0 200 200">
  <path id="path" d="M100,50 a50,50 0 1,0 0.1,0" />
</svg>

gsap.registerPlugin(DrawSVGPlugin);  // DrawSVGPlugin を登録（SVG線の描画アニメ用）

gsap.from("#path", {
  drawSVG: "0%",      // 線を長さ0％から描き始める（＝何も見えない状態から）
  duration: 2         // 2秒かけて完全に描画される
});
  • SVGの線が「描かれる」ようにアニメーションします

chrome-capture-2025-5-12-(11).gif

☑️補足
#pathは <path> タグである必要があります。

その他プラグイン一覧

プラグイン 用途
ScrollSmoother 滑らかなスクロール体験を実現
Draggable 要素をドラッグ＆ドロップ可能に
ScrollToPlugin 特定位置へスムーズスクロール
Observer タッチ／ホイール／スクロールイベントを簡単に検知
GSDevTools アニメーションタイムラインをGUIで操作・デバッグ
InertiaPlugin ドラッグ後の慣性スクロール／アニメーション
MotionPathPlugin 要素をSVGパスに沿って動かす

その他のプラグイン（必要に応じてCDN追加）

プラグイン名 CDN例（必要なときのみ）
ScrollSmoother <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollSmoother.min.js"></script>
Draggable <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/Draggable.min.js"></script>
InertiaPlugin <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/InertiaPlugin.min.js"></script>
MotionPathPlugin <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/MotionPathPlugin.min.js"></script>
Observer <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/Observer.min.js"></script>

おわりに

GSAPのパラメータやプラグインを一通り押さえれば、動きのアイデアは無限大です。
まずはここに載せたサンプルをコピペ→変更→実験、のサイクルで慣れてみてください。

GSAP公式サイトにもたくさんの素敵なサンプルがあるのでぜひ試してみてください。
https://gsap.com/

7
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
7
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?