【JavaScript】GSAPの使い方｜基本からおしゃれアニメーションまで徹底解説！

タグ :

GSAP

JAVASCRIPT

PROGRAMMING

こんにちは！今回は、Web制作の現場で大活躍するアニメーションライブラリ「GSAP（ジーサップ）」の基本的な使い方を紹介します。

アニメーションをもっと「なめらかに」「おしゃれに」したい方におすすめです！

1 GSAPってなに？
2 導入方法
3 基本のアニメーション
4 タイムラインで連続アニメーション
5 フェードインアニメーションも簡単にできる！
6 よく使うプロパティ一覧
7 よく使うイージング効果
8 スクロールに合わせて動かす（ScrollTrigger）
9 toggleActionsとは？
10 Stagger（複数要素の順次アニメーション）
11 まとめ

GSAPってなに？

GSAP（GreenSock Animation Platform）は、JavaScriptで動く高性能なアニメーションライブラリです。
以下のような特徴があります：
• 高速でなめらかな動き
• モバイルにも対応
• タイムラインで複雑な動きも簡単に
• ScrollTriggerなどのプラグインでスクロールアニメもOK！

導入方法

CDNで使う（HTMLに貼るだけ）



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

基本のアニメーション

HTMLにある要素を動かすには、gsap.to() や gsap.from() を使います。

•gsap.set(): 要素をアニメーション前の初期状態に配置
•gsap.to(): 現在の状態から指定した状態までアニメーション
•gsap.from(): 指定した状態から現在の状態までアニメーション
•gsap.fromTo(): 開始状態と終了状態を明示的に指定

例：四角を右に動かす

See the Pen
Untitled by ryotom (@ryotam-smoke)
on CodePen.

ポイント：
• x: 300 → 横に300px動く
• duration → 時間（秒）
• ease → イージングで動きに緩急を

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

GSAPの魅力の1つが timeline。動きを順番に並べるのも簡単です。

See the Pen
Untitled by ryotom (@ryotam-smoke)
on CodePen.

タイムラインについては別の記事で詳しく解説しています！

フェードインアニメーションも簡単にできる！

See the Pen
Untitled by ryotom (@ryotam-smoke)
on CodePen.

opacity と translateY を組み合わせて、ふんわり感を演出
• ease: “power3.out” で自然な動きに

よく使うプロパティ一覧

プロパティ名	説明
x,y	要素を移動
opacity	透明度を変更
scale	拡大・縮小
rotation	回転
duration	時間（秒）
delay	遅延（秒）
ease	イージング効果(power3.outなど)

よく使うイージング効果

イージングとは、動きの速度に変化をつける効果のことで、
「最初ゆっくり→だんだん速く」といった自然な動きを演出できます。
GSAPには複数のイージング効果が用意されています。

1. power1.out（ふんわりスムーズ）

See the Pen
Untitled by ryotom (@ryotam-smoke)
on CodePen.

特徴：ゆっくり始まり、自然に止まる。柔らかくてナチュラル。

2. power3.out（プロっぽい加速感）

See the Pen
Untitled by ryotom (@ryotam-smoke)
on CodePen.

特徴：より勢いのある動き。Webデザインでよく使われる定番！

3. back.out(1.7)（ビヨンと飛び出す）

See the Pen
Untitled by ryotom (@ryotam-smoke)
on CodePen.

特徴：少し通り越してから戻る「バウンド」的な動き。印象に残りやすい！

4. elastic.out(1, 0.3)（ぷるんぷるん震える）

See the Pen
Untitled by ryotom (@ryotam-smoke)
on CodePen.

特徴：ゴムのように「びよーん」と弾む。動きに楽しさを加えたいときに使えます。

5. bounce.out（ポンッと跳ねる）

See the Pen
Untitled by ryotom (@ryotam-smoke)
on CodePen.

特徴：ボールが地面に跳ねるような動き。ゲームやポップな演出にぴったりです！

6. expo.out（爆速スタート、スパッと止まる）

See the Pen
Untitled by ryotom (@ryotam-smoke)
on CodePen.

特徴：最初めちゃくちゃ速くて、すっと止まる。キレのある演出に最適！

その時のシーンによって使い分けましょう！

スクロールに合わせて動かす（ScrollTrigger）

インポート



<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script>
<script>
  gsap.registerPlugin(ScrollTrigger);
</script>

基本のコード



gsap.to(".box", {
  x: 500,
  duration: 3,
  scrollTrigger: {
    trigger: ".box",      // この要素が表示されたら
    start: "top 80%",     // トリガーの開始位置
    end: "top 30%",       // トリガーの終了位置
    toggleActions: "play pause resume reset", // スクロールに応じた挙動
    markers: true         // デバッグ用のマーカー表示
  }
});

⚫︎位置指定

• trigger: アニメーション開始の基準となる要素
• start: いつ開始するか（例: “top 80%” → 要素の上端がビューポートの80%に来たとき）
• end: いつ終了するか（例: “bottom 20%”）

⚫︎書き方のパターン

“要素の位置ビューポートの位置”
例: “top center”, “bottom top”

ページをスクロールすると動き出すアニメーションも簡単に！

See the Pen
Untitled by ryotom (@ryotam-smoke)
on CodePen.

toggleActionsとは？

toggleActions は、ScrollTriggerがどのタイミングでどんなアクションをするかを指定するためのオプションです。

書き方の基本

toggleActions: “A B C D”

このように4つの動作を順番に指定します。

項目	タイミング	意味
A	要素がビューポートに入ったとき（enter）	何をする？
B	要素がビューポートから出たとき（leave）	何をする？
C	再び入ってきたとき（enterBack）	何をする？
D	再び出ていったとき（leaveBack）	何をする？

よく使うアクション一覧

toggleActions に指定できるアクションには、いくつか種類があります。
それぞれの意味を知っておくことで、思い通りのアニメーション挙動が作れるようになります！

以下に、よく使うアクションを一覧でまとめてみました。

アクション名	動作内容
play	アニメーションを再生する
pause	一時停止
resume	一時停止から再開
restart	最初から再生しなおす
reverse	逆再生
reset	初期状態に戻す
complete	最後の状態にジャンプ
none	何もしない

toggleActions値	動作例	解説
“play pause resume reset”	見えたら再生、離れたら停止	入退場を完全に制御
“restart none none none”	毎回最初から再生	何度でもアニメする
“play none none reverse”	入ったら再生、戻ったら逆再生	高級感あるUIに◎
“none none none none”	全く何もしない	テスト用・一時停止に便利