【JavaScript】GSAPの使い方｜基本からおしゃれアニメーションまで徹底解説！
こんにちは！今回は、Web制作の現場で大活躍するアニメーションライブラリ「GSAP（ジーサップ）」の基本的な使い方をブログ形式でご紹介します。
アニメーションをもっと「なめらかに」「おしゃれに」したい方におすすめです！
目次
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() を使います。
例：四角を右に動かす
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）
ページをスクロールすると動き出すアニメーションも簡単に！
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 の代表的なパターン例です。用途に応じて使い分けてみましょう。
| toggleActions値 | 動作例 | 解説 |
| “play pause resume reset” | 見えたら再生、離れたら停止 | 入退場を完全に制御 |
| “restart none none none” | 毎回最初から再生 | 何度でもアニメする |
| “play none none reverse” | 入ったら再生、戻ったら逆再生 | 高級感あるUIに◎ |
| “none none none none” | 全く何もしない | テスト用・一時停止に便利 |
まとめ
初心者にも扱いやすい
✔ 表現力がとにかく高い
✔ 複雑なアニメもサクッと実装
GSAPを使えば、コードだけでプロ並みのアニメーションが簡単に作れます！
