GSAP
コアトゥイーンメソッド
- gsap.to(targets, vars) — 現在の状態から
varsへアニメーション。最も一般的。 - gsap.from(targets, vars) —
varsから現在の状態へアニメーション（登場）。 - gsap.fromTo(targets, fromVars, toVars) — 開始と終了を明示的に指定。
- gsap.set(targets, vars) — 即座に適用（duration 0）。
プロパティ名には常にキャメルケースを使用（例：backgroundColor、rotationX）。
共通のvars
- duration — 秒（デフォルト0.5）。
- delay — 開始までの秒数。
- ease —
"power1.out"（デフォルト）、"power3.inOut"、"back.out(1.7)"、"elastic.out(1, 0.3)"、"none"。 - stagger — 数値
0.1またはオブジェクト：{ amount: 0.3, from: "center" }、{ each: 0.1, from: "random" }。 - overwrite —
false（デフォルト）、true、または"auto"。 - repeat — 数値、または無限ループには
-1。yoyo — repeatと組み合わせて方向を交互に。 - onComplete、onStart、onUpdate — コールバック。
- immediateRender — from()/fromTo()ではデフォルト
true。同じプロパティと要素を対象とする後続のトゥイーンでは上書きを避けるためfalseに設定。
トランスフォームとCSS
生の transform 文字列よりもGSAPのトランスフォームエイリアスを推奨：
| GSAPプロパティ | 同等のCSS |
|---|---|
x, y, z | translateX/Y/Z (px) |
xPercent, yPercent | translateX/Y (%) |
scale, scaleX, scaleY | scale |
rotation | rotate (deg) |
rotationX, rotationY | 3D rotate |
skewX, skewY | skew |
transformOrigin | transform-origin |
- autoAlpha —
opacityよりも推奨。0ではvisibility: hiddenも設定。 - CSS変数 —
"--hue": 180。 - svgOrigin (SVGのみ) — グローバルSVG座標空間の原点。
transformOriginと併用しない。 - 方向付き回転 —
"360_cw"、"-170_short"、"90_ccw"。 - clearProps —
"all"またはカンマ区切り。完了時に関連インラインスタイルを削除。 - 相対値 —
"+=20"、"-=10"、"*=2"。
ファンクションベースの値
gsap.to(".item", {
x: (i, target, targets) => i * 50,
stagger: 0.1,
});
イージング
組み込みイージング：power1–power4、back、bounce、circ、elastic、expo、sine。それぞれ .in、.out、.inOut が用意されています。
デフォルト設定
gsap.defaults({ duration: 0.6, ease: "power2.out" });
トゥイーンの制御
const tween = gsap.to(".box", { x: 100 });
tween.pause();
tween.play();
tween.reverse();
tween.kill();
tween.progress(0.5);
tween.time(0.2);
gsap.matchMedia()（レスポンシブ + アクセシビリティ）
メディアクエリに一致する場合のみセットアップを実行。一致しなくなると自動で元に戻します。
let mm = gsap.matchMedia();
mm.add(
{
isDesktop: "(min-width: 800px)",
reduceMotion: "(prefers-reduced-motion: reduce)",
},
(context) => {
const { isDesktop, reduceMotion } = context.conditions;
gsap.to(".box", {
rotation: isDesktop ? 360 : 180,
duration: reduceMotion ? 0 : 2,
});
},
);
タイムライン
タイムラインの作成
const tl = gsap.timeline({ defaults: { duration: 0.5, ease: "power2.out" } });
tl.to(".a", { x: 100 }).to(".b", { y: 50 }).to(".c", { opacity: 0 });
位置パラメータ
3番目の引数で配置を制御：
- 絶対指定:
1— 1秒の位置 - 相対指定:
"+=0.5"— 終了後；"-=0.2"— 終了前 - ラベル:
"intro"、"intro+=0.3" - アライメント:
"<"— 前と同じ開始；">"— 前の終了後；"<0.2"— 前の開始0.2秒後
tl.to(".a", { x: 100 }, 0);
tl.to(".b", { y: 50 }, "<"); // .aと同じ開始
tl.to(".c", { opacity: 0 }, "<0.2"); // .bの開始0.2秒後
ラベル
tl.addLabel("intro", 0);
tl.to(".a", { x: 100 }, "intro");
tl.addLabel("outro", "+=0.5");
tl.play("outro");
tl.tweenFromTo("intro", "outro");
タイムラインオプション
- paused: true — 一時停止状態で作成。
.play()で開始。 - repeat、yoyo — タイムライン全体に適用。
- defaults — すべての子トゥイーンにマージされるvars。
タイムラインのネスト
const master = gsap.timeline();
const child = gsap.timeline();
child.to(".a", { x: 100 }).to(".b", { y: 50 });
master.add(child, 0);
再生制御
tl.play()、tl.pause()、tl.reverse()、tl.restart()、tl.time(2)、tl.progress(0.5)、tl.kill()。
パフォーマンス
TransformとOpacityを優先
x、y、scale、rotation、opacity のアニメーションはコンポジター上で動作します。同じ効果をtransformで実現できる場合は width、height、top、left を避けてください。
will-change
will-change: transform;
実際にアニメーションする要素にのみ使用。
gsap.quickTo() による頻繁な更新
let xTo = gsap.quickTo("#id", "x", { duration: 0.4, ease: "power3" }),
yTo = gsap.quickTo("#id", "y", { duration: 0.4, ease: "power3" });
container.addEventListener("mousemove", (e) => {
xTo(e.pageX);
yTo(e.pageY);
});
スタガー > 多数のトゥイーン
手動で遅延を設定した個別のトゥイーンではなく stagger を使用。
クリーンアップ
画面外のアニメーションは一時停止または削除。
リファレンス（オンデマンドで読み込み）
- references/effects.md — ドロップインエフェクト：タイプライターテキスト、オーディオビジュアライザー。HyperFrames用の既製エフェクトパターンが必要な場合に参照。
ベストプラクティス
- プロパティ名はキャメルケースを使用。transformエイリアスとautoAlphaを推奨。
- delayによる連鎖よりもタイムラインを推奨。位置パラメータを使用。
- 読みやすいシーケンスのために
addLabel()でラベルを追加。 - タイムラインコンストラクタにdefaultsを渡す。
- 再生制御が必要な場合はトゥイーン/タイムラインの戻り値を変数に保存。
禁止事項
- トランスフォームで十分な場合にレイアウトプロパティ（width/height/top/left）をアニメーションしない。
- 同じSVG要素にsvgOriginとtransformOriginを両方使用しない。
- タイムラインでシーケンスを組める場合にdelayでアニメーションを連鎖しない。
- DOMが存在する前にトゥイーンを作成しない。
- クリーンアップを怠らない — 不要になったトゥイーンは必ず削除。