演出・ヒーロー
ランディングの第一印象。文字・画像・SVGを束ねた印象的なオープニング演出。
GreenSock Animation Platform
動きで、伝える。
GSAPは、Webであらゆるものを思いどおりに動かすためのアニメーションエンジン。
このページ自体が、その実力を体感するための実験室です。
scroll
02Easing
同じ距離。
まるで違う「質感」。
アニメーションの印象を決めるのはイージング（加減速のカーブ）。GSAPは数十種のイージングと elastic/back/bounce などの表現力豊かなカーブを標準装備。下のドットは全て同じ距離・同じ時間で動いていますが、 受ける印象はまるで違います。
duration: 2.4s / 同時スタート
none（線形）
power2.out
power4.inOut
expo.out
back.out
elastic.out
bounce.out
steps(8)
// 同じ距離・同じ時間。イージングだけを変える
gsap.fromTo(dot,
{ x: 0 },
{
x: distance,
duration: 2.4,
ease: "elastic.out(1, 0.35)", // power2.out / back.out / bounce.out ...
}
);03ScrollTrigger · Pin · Scrub
スクロールが、
タイムラインを操作する。
Pin
要素を画面に固定し、その間スクロールを進行に使う
Scrub
スクロール量とアニメーションを双方向に同期
Parallax
レイヤーごとの速度差で奥行きを生む
04Horizontal
縦に進むほど、
横へ流れる。
GSAPがWebで活躍する場面を、横スクロールのギャラリーで。右へどうぞ。
→ scroll rightスクロールテリング
スクロールに沿って物語を展開。プロダクト紹介やレポートで多用される手法。
UIマイクロ演出
ボタン・モーダル・リストの細かな動き。体験の質を底上げする縁の下の力持ち。
データ・可視化
グラフやカウンタを滑らかに。数字が動くと、情報は記憶に残る。
ゲーム・WebGL連携
Canvas/WebGLやThree.jsの値もGSAPで補間。表現の限界を押し広げる。
05SplitText
文字は、ひとつずつ
意のままに動かせる。
SplitTextは見出しや文章を文字・単語・行に自動分解し、それぞれを独立したアニメーション対象にします。 スクロールに合わせて言葉が順に点灯し、読み手の視線を自然に導く。日本語の禁則や折り返しにも追従します。
charswordslinesmask日本語対応自動再分割
// 文章を単語・行に分解し、スクロールで点灯
SplitText.create(".para", {
type: "words,lines",
autoSplit: true, // フォント確定・リサイズで自動再分割
onSplit(self) {
gsap.set(self.words, { color: "#5a5a66" });
return gsap.to(self.words, {
color: "#f3f3ef",
stagger: 0.4,
ease: "none",
scrollTrigger: { trigger: ".para", scrub: true },
});
},
});06Flip
レイアウトの変化を、
そのまま動きに。
要素の位置・大きさが変わる「前後の状態」をFlipが記録し、その差分を自動でアニメーション化。 フィルタや並び替えのようにDOM構造ごと変わる遷移も、見た目は途切れず滑らかにつながります。
カードをクリックすると詳細へ拡大します
// 変化前の状態を記録 → DOMを変更 → 差分をアニメーション
const state = Flip.getState(".item");
setFilter(next); // Reactが再描画してDOMが変わる
Flip.from(state, {
duration: 0.6,
scale: true,
absolute: true,
ease: "power2.inOut",
onEnter: els => gsap.fromTo(els,
{ opacity: 0, scale: 0.6 }, { opacity: 1, scale: 1 }),
onLeave: els => gsap.to(els, { opacity: 0, scale: 0.6 }),
});07Draggable / Inertia
掴んで、投げて、
慣性で滑る。
Draggableは要素を自在にドラッグ可能にし、InertiaPluginが「離した後」の速度・減速・跳ね返りを 物理的に計算します。慣性スクロール、スワイプ、回転ダイヤルなど触り心地の良いUIの基盤です。
掴んで投げてみてください →
DRAG
ME
投げて
みて
INERTIA
0°
回して値を操作
// ドラッグ可能化 + 慣性スロー（枠内でバウンド）
Draggable.create(".token", {
type: "x,y",
bounds: ".board",
inertia: true, // 離した後の減速・跳ね返りを物理計算
edgeResistance: 0.7,
});
// 回転ダイヤル
Draggable.create(".knob", { type: "rotation", inertia: true });08MotionPath / DrawSVG
決めた軌道を、
なぞって進む。
MotionPathPluginは要素を自由なSVGパスに沿って移動させ、進行方向へ自動で姿勢を合わせます。 DrawSVGはパスの描画自体をアニメーション化。2つを組み合わせ、スクロールで軌道を辿る演出に。
// パスを描きながら、要素をパスに沿って動かす
const tl = gsap.timeline({
scrollTrigger: { trigger: ".stage", scrub: 1 },
});
tl.from(".path", { drawSVG: "0%" }, 0) // DrawSVGで描画
.to(".comet", {
motionPath: {
path: ".path",
align: ".path",
alignOrigin: [0.5, 0.5],
autoRotate: true, // 進行方向へ自動回転
},
ease: "none",
}, 0);09MorphSVG
かたちが、かたちへ
溶けて変わる。
MorphSVGは、あるSVG形状から別の形状への変形を自動で補間します。点の数が異なる形でも破綻なく繋ぎ、 ロゴ・アイコン・イラストの有機的な変化を実現。下のボタンで形を切り替えられます。
// ある形状を別の形状へ滑らかに補間（点の数が違ってもOK）
gsap.to("#shape", {
morphSVG: "M100,20 C144,20 180,56 180,100 ...", // 目標の形のd
duration: 0.9,
ease: "power3.inOut",
});10Three.js / WebGL
3Dの世界も、
GSAPが動かす。
GSAPはCSSやSVGに限らず、あらゆる数値を補間できる「汎用エンジン」です。ここではThree.jsの 125個のキューブの座標・回転をGSAPで制御。描画ループ自体もgsap.tickerで回しています。 ボタンで集合と散開を切り替えてみてください。
125 cubes / driven by GSAP
// GSAPはThree.jsの値も補間できる（フレームワーク非依存）
// 描画ループ自体もgsap.tickerで回す
gsap.ticker.add(() => renderer.render(scene, camera));
cubes.forEach((mesh, i) => {
gsap.to(mesh.position, {
x: target.x, y: target.y, z: target.z,
duration: 1.2,
ease: "power3.out",
delay: i * 0.0035, // 125個をstaggerで
});
});The best part
これ、全部無料。
2024年のWebflowによる買収を経て、GSAPは2025年のv3.13で全プラグインを完全無料化。 かつて年額制だったSplitText・MorphSVG・DrawSVG・ScrollSmootherなども、 いまは誰でも商用利用まで含めて自由に使えます。
TimelineEaseScrollTriggerScrollSmootherSplitTextFlipDraggableInertiaPluginObserverMotionPathPluginDrawSVGPluginMorphSVGPluginScrambleTextTextPlugin
Built with GSAP v3.15 · Next.js 16 · React 19 — printemps.tokyo lab