GSAP無料化の今こそ、外注で頼むべきは「動くのに重くないスクロール演出」

「GSAPが無料になったので、うちの案件にも派手なスクロール演出を入れたい」。最近、そんな相談が増えてきたと感じています。ただ、演出を足すほどページは重くなりがちで、せっかくの表示速度が落ちてしまう例も少なくありません。結論から言えば、いま外注で頼むべきは「派手に動くこと」ではなく「動くのに重くないこと」です。本記事では、その両立をどう設計するかを実装者の視点で整理します。

GSAP無料化で何が変わったのか

GSAP（GreenSock Animation Platform）は、Webのアニメーションを細かく制御できるJavaScriptライブラリです。Webデザインツールを提供するWebflowがGreenSockを2024年秋に買収し、2025年4月30日に「GSAPを100%無料化」すると発表しました。以前は有料会員向けだったプラグインを含め、商用利用も無料で使えるようになった、と公式は説明しています。

これが実務にもたらす変化はシンプルです。

• 高度な演出を試すコスト（金銭・心理の両面）が下がった
• 「使えるかどうか」より「どう使うか」が問われる段階に入った
• 結果として、演出の巧拙より設計の巧拙で差がつくようになった

つまり道具が身近になったぶん、任せる相手を「動かせる人」から「重くせずに動かせる人」で選ぶ意味が増した、というのが私の実感です。

「動くのに重い」はなぜ起きるのか

演出が重く感じられるとき、多くはブラウザの操作への反応が鈍っています。専門的にはINP（操作してから画面が反応するまでの速さ）やLCP（主要な画像や見出しが表示されるまでの速さ）といった指標で語られますが、体感としては「スクロールがカクツく」「タップの反応が遅い」という形で現れます。

やりがちな重い作りには、いくつか共通点があります。

• 画面内の多数の要素を同時にアニメーションさせている
• スクロールのたびに、レイアウトを再計算させる作り方になっている
• 演出用のJavaScriptを全ページに一律に読み込んでいる
• 遅延読み込み（画像を必要になった時点で読み込む仕組み）と演出がぶつかっている

いずれも「動かすこと」だけを目的にすると起きやすく、速度への配慮を後回しにしたサインでもあります。

軽く仕上げるための設計の勘所

では、どう作れば軽く収まるのか。私が実装時に意識している要点を挙げます。

• 同時に動かす量を絞る。視線が向く主役だけを動かし、脇役は静かに置く。全部動くと、どこも印象に残りません。
• スクロール連動は位置や透明度の変化で。レイアウトを組み直させる指定は避け、要素の移動やフェードなど描画が軽い方法を選びます。
• 遅延読み込みと干渉させない。画像の読み込みタイミングと演出の発火が競合しないよう、順序を設計します。
• JavaScriptは必要な所だけ。演出のない下層ページにまで重い処理を載せない。ページ単位で読み込みを分ける発想が効きます。

たとえば要素を横から出す演出でも、書き方ひとつで負荷は変わります。

// 位置の移動と透明度だけを動かす（描画が軽い）
gsap.from(".card", {
  x: 40,        // 横位置をずらして戻す
  autoAlpha: 0, // 透明度を変える
  duration: 0.6,
});

ここで幅や余白そのものを毎フレーム変えるような指定にすると、ブラウザはそのたびにレイアウトを計算し直し、動きが重くなります。「何を動かすか」より「どう動かすと軽いか」を先に決めるのが勘所です。

演出と速度は、後から足すものではない

私自身のサイト（tsudzuri.com）は、Astroという表示の軽さに強いフレームワークで作り、Cloudflareから配信しています。演出を入れるときも、まず素の表示を速く保ち、そのうえで必要な箇所にだけ動きを足す順序を守っています。速度を犠牲にした演出は、結局ユーザーの離脱につながると考えているためです。

速度と実装の考え方は表示速度とCore Web Vitalsの記事、フレームワーク選定の背景はAstroヘッドレスの外注実装の記事でも触れています。演出と速度は別々の工程ではなく、最初から一緒に設計するもの、というのが結論です。

高度だけれど重くない演出を外注で任せたい方は、お問い合わせからお気軽にご相談ください。実装済みの案件をふまえ、御社のデザイン意図と表示速度の両立をご提案します。

本記事は2026年7月時点の情報です。GSAPの提供条件やツールの仕様は今後変わる可能性があるため、導入時は公式の最新情報をご確認ください。