GSAPの使い方 — gsap.to()からtimeline・staggerまで、記事内で動かして覚える

「ここ、ふわっと動かしたいです」。デザインカンプの隅に、そう書かれていることがあります。ふわっと、が何秒で、どんな加速なのかは書いていない。実装者はそこを決めながら組みます。

CSSのtransitionで足りる場面も多いのですが、動きが増えて順番が絡み始めると、途端に苦しくなる。そこで出すのがGSAPです。この記事では、私が実際に書いている順番でGSAPの使い方を追います。

読むだけでは味がないので、記事の中に編集できるプレイグランドを置きました。HTMLとJSをその場で書き換えれば、すぐ隣で実行されます。数値をいじる、easeを差し替える、わざと壊してみる。全部やって大丈夫です。

無料化のニュースと「重くしない設計」の話はGSAP無料化の今こそ、外注で頼むべきは「動くのに重くないスクロール演出」に書いたので、こちらは書き方に絞ります。

まずGSAPを読み込む

入れ方は2通りあります。とりあえず試すならCDN、案件で使うならnpm。

CDN：HTMLに1行足すだけ

ビルドツールがない現場でもこれで動きます。</body>の直前に置くのが手っ取り早い。

<div class="box"></div>

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script>
  gsap.to(".box", { x: 220, duration: 0.8, ease: "power2.out" });
</script>

読み込むとグローバルにgsapが生えます。スクリプトの順番だけ注意してください。本体を読む前にgsap.to()を呼ぶと、定番のgsap is not definedで止まります。

npm：バンドラがあるなら

npm install gsap

import { gsap } from "gsap";

gsap.to(".box", { x: 220, duration: 0.8, ease: "power2.out" });

名前付きでgsapを取り出すだけ。バンドラを通すので、読み込むタイミングを自分で握れます。この先はどちらで入れても同じです。

覚えるのは gsap.to() ひとつから

GSAPの入り口は、実質これだけです。

gsap.to(対象, { 変化後の値, duration, ease });

「誰を」「どんな状態に」「何秒で」「どんな加速で」。この4つが埋まれば動きます。下のJSタブを開いて、durationやeaseを書き換えてみてください。HTMLタブで色や大きさを変えてもいい。

触ってみると、durationよりeaseのほうが印象を決めるのが分かるはずです。none（等速）はロボットっぽく、power2.outは自然に減速して止まる。back.out(1.7)は行き過ぎて戻り、bounce.outは跳ねる。デザイナーが「ふわっと」と言うとき、たいていは最初が速くて終わりがゆっくりな、power2.outあたりの動きを指しています。

到達点ではなく開始点を指定したいときはfromを使います。

• gsap.to(el, {...}) … 今の状態 → 指定した値へ
• gsap.from(el, {...}) … 指定した値 → 今の状態へ（登場アニメに便利）
• gsap.fromTo(el, {開始}, {終了}) … 両端を明示する

登場演出はfromが楽です。CSSで最終形を書いておいて、そこへ向かって動かすだけなので、万一アニメーションが走らなくても「最終形が表示されたまま」で済む。壊れ方が安全なんです。

順番に繋ぐなら timeline

動きが2つ3つと増えると、delayで時間を数える方式は破綻します。1つ目の長さを変えた瞬間、後ろ全部のdelayを計算し直すことになるからです。

timelineを使うと、その「時間を数える仕事」から解放されます。

鍵は、第3引数として渡す position parameter です。デモの"-=0.25"を"<"に変えると、3つの箱が同時に動きます。

• 省略 … 前の動きが終わってから開始
• "-=0.25" … 前の終わりの0.25秒前から開始（少し重なる）
• "<" … 前の動きと同時に開始

timelineにしておくと、あとからtl.pause()やtl.progress(0.5)で途中で止めたり好きな位置へ飛ばせたりできます。レビューで「0.3秒のところ、もう少し重ねて」と言われても、数値ひとつで直せる。

setTimeoutを並べて組むと、止められない・巻き戻せない・タブが非アクティブだとずれる、という三重苦になります。順番のある動きは、最初からtimelineで組むほうが結局速い。

複数要素をずらす stagger

カードが12枚、順番にふわっと出てくる。よくある演出です。1枚ずつdelayを書くのは現実的ではありません。

fromを"center"から"random"や"end"に書き換えると、印象がはっきり変わります。amountを1.5にしてもったりやってみてもいい。

staggerに数値を渡すと「1要素あたりの間隔」になりますが、要素数が変われば全体の尺も変わってしまう。CMS連動で枚数が読めないならamountのほうが安全です。

• stagger: 0.1 … 1要素ごとに0.1秒ずつ。枚数が増えるほど全体が伸びる
• stagger: { amount: 0.6 } … 全体を0.6秒に収める。枚数が変わっても尺は変わらない
• from: "center" … 中央から外へ広がる。"end"や"random"も指定できる
• grid: "auto" … 格子状の並びを認識して、2次元的にずらす

私は、枚数が可変になる一覧ではamount指定に寄せています。

CSSで足りるか、GSAPを出すか

ここまで書いておいてなんですが、私はまずCSSで足りないかを考えます。このサイトのスクロール演出も、原則CSSだけで実装しています。ライブラリを積まなければ、その分だけ確実に速い。

線引きはシンプルです。動きが1〜2個で再生するだけなら、CSSのtransitionやanimationで十分。順番の制御が要る、途中で止めたい、要素が多い——こうした条件が乗ってきたらGSAPを出す。

「かっこいいからGSAP」で入れると、たいてい重さだけが残ります。

実務で詰まるのは、書き方より“出し方”

GSAPの書き方自体は、ここまでの3つでかなり組めます。差が出るのはその先です。この記事のプレイグランドも、次の3点を踏まえて実装しました。

壊れてもいい場所で動かす。 デモはすべて、分離されたiframeの中で実行しています。だからあなたがどんなコードを書いても、この記事本体は壊れません。試しに JSタブで gsap.to( と途中まで書いてみてください。下のバーに構文エラーだけが出て、ページは平然としています。

記事ページ自体にはGSAPを載せない。 GSAP本体は、デモを最初に実行する瞬間に1度だけ取りに行き、iframeの中へ渡しています。ブログの他の記事にはGSAPが1バイトも降ってきません。最初から全ページで読むと、演出と関係ないページまで重くなる。触ったときの反応が鈍る話はINPの外科的改善にも書きました。

動きを減らす設定を尊重する。 OS側で「視差効果を減らす」を有効にしている人には、自動実行しません。コードは読める状態で置いておいて、「実行」を押したときだけ動く。この配慮はアクセシビリティの実装の一部です。

こうした「動かす以外の部分」が、実際の案件では時間を食います。デザインの意図どおりに動かしつつ、速度もアクセシビリティも落とさない。ここを引き受けられるかどうかが、実装者の腕の見せどころだと思っています。

まとめ

• 入れ方はCDNでHTMLに1行か、npm install gsapしてimport { gsap } from "gsap"
• gsap.to()の「対象・値・duration・ease」から始める。印象を決めるのはease
• 順番があるなら最初からtimeline。position parameterで重なりを調整でき、途中で止めたり飛ばしたりもできる
• 複数要素はstagger。枚数が可変ならamountで全体の尺を固定する
• CSSで足りるならCSS。順番・制御・要素数が効いてきたらGSAP
• 実務の勝負どころは、読み込みのタイミング・動きを減らす設定・壊れ方

アニメーションの実装だけを切り出して任せたい、デザインの動きを崩さず速度も守りたい。そういうご相談はお問い合わせからどうぞ。カンプの「ふわっと」を、実際に動く形にします。

本記事は2026年7月時点の情報です。GSAPの仕様や提供条件は変わる場合があるため、導入時は公式の最新情報もあわせてご確認ください。