GSAP
コアトゥイーンメソッド
- gsap.to(targets, vars) — 現在の状態から
varsへアニメーション。最も一般的です。 - gsap.from(targets, vars) —
varsから現在の状態へアニメーション（エントランス）。 - gsap.fromTo(targets, fromVars, toVars) — 明示的な開始と終了。
- gsap.set(targets, vars) — 即座に適用（duration 0）。
常にcamelCaseのプロパティ名を使用してください（例：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 | スケール |
rotation | 回転 (deg) |
rotationX、rotationY | 3D回転 |
skewX、skewY | スキュー |
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()。
パフォーマンス
トランスフォームと不透明度を優先
x、y、scale、rotation、opacityのアニメーションはコンポジター上で動作します。トランスフォームで同じ効果が得られる場合は、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用の既製エフェクトパターンが必要な場合に読んでください。
ベストプラクティス
- プロパティ名はcamelCaseを使用；トランスフォームエイリアスとautoAlphaを優先します。
- delayを使用したチェーンよりもタイムラインを優先；位置パラメータを使用します。
- 読みやすいシーケンスのために
addLabel()でラベルを追加します。 - デフォルトをタイムラインコンストラクターに渡します。
- 再生制御が必要な場合は、トゥイーン/タイムラインの戻り値を保存します。
禁止事項
- トランスフォームで十分な場合にレイアウトプロパティ（width/height/top/left）をアニメーションしない。
- 同じSVG要素にsvgOriginとtransformOriginの両方を使用しない。
- タイムラインでシーケンスできる場合に、delayを使用してアニメーションをチェーンしない。
- DOMが存在する前にトゥイーンを作成しない。
- クリーンアップをスキップしない — 不要になったトゥイーンは必ず強制終了してください。