かっこいい海外サイトのソースを覗くと、かなりの確率で見つかるのがGSAP（GreenSock Animation Platform）です。世界のアワード受賞サイトの定番で、2024年からは全機能が無料・商用利用OKになりました（Webflow社による買収後にライセンスが開放されました）。
GSAPで何ができるのか
CSSアニメーションとの一番の違いは「時間とスクロールを自在に操れる」ことです。
- 複数の要素を時間差で順番に動かす（タイムライン）
- スクロール量に演出を同期させる（ScrollTrigger：パララックス、ピン留め、横スクロール）
- 文字を1文字ずつバラして躍らせる（SplitText）
- 数値・色・SVGなど、ほぼ何でも滑らかに補間する
CSSだけでも「ふわっと出す」程度はできますが、「スクロールに合わせて画像がめくれていく」ような演出はGSAPの領域です。
最初の一歩（コピペで動きます）
CDNを読み込んで、1行書くだけです。
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<h1 class="title">こんにちは</h1>
<script>
gsap.from(".title", {y: 40, opacity: 0, duration: 1, ease: "power3.out"});
</script>
from は「この状態から現在の位置へ」という意味。y: 40 は40px下から、ease は動きの味付けです。この ease の選び方こそが上手い人と初心者の差が出るところで、迷ったら power3.out（すっと減速）が万能です。
ScrollTriggerを使うと、たとえばこんな「スクロールで扉がひらく」表現が作れます。
ライセンスの正確なところ
- GSAP本体・ScrollTrigger・SplitTextなど全プラグインが無料で商用利用可
- 自分のサイトにも、お客様に納品するサイトにも使えます
- 禁止されているのは「GSAPを組み込んだ、コードを書かずに使えるアニメーション作成ツール」を作って競合すること。普通のサイト制作では気にする必要はありません
CSSアニメーションとの使い分け
- hover・単発のフェード → CSSで十分（軽い・シンプル）
- スクロール連動・時間差のある演出・文字の分解 → GSAP
- どちらの場合も
prefers-reduced-motion（動きを減らすOS設定）への配慮を
挫折しやすいポイント
GSAPは書けること自体は簡単ですが、「どの数値なら気持ちいいのか」——duration、ease、要素間の時間差——の調整に経験が要ります。1つの演出を納得いくまで磨くと、平気で数時間かかります。
手っ取り早く「調整済みの完成形」を見たい人は、motionAETHERの動くカタログを眺めてみてください。GSAPを使った演出が500点、全部動いた状態で並んでいます。どんな動きが存在するのかを知るだけでも、自分で書くときの引き出しが増えるはずです。