GSAP
HyperFrames 契約
HyperFrames は gsap ランタイムアダプターを通じて GSAP を制御します。同期的に一時停止状態のタイムラインを作成し、正確な data-composition-id をキーとして window.__timelines に登録します。HyperFrames はそのタイムラインをシークします。
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<script>
window.__timelines = window.__timelines || {};
const tl = gsap.timeline({ paused: true });
tl.from(".title", { y: 48, opacity: 0, duration: 0.6, ease: "power3.out" }, 0);
tl.to(".accent", { scaleX: 1, duration: 0.5, ease: "power2.out" }, 0.25);
window.__timelines["main"] = tl; // キーはコンポジションルートの data-composition-id と一致させる必要があります
</script>
- レジストリキーはコンポジションルートの
data-composition-idと一致している必要があります。 - レンダリングクリティカルなモーションには
tl.play()を呼び出さないでください。 - 非同期コード、タイマー、またはイベントハンドラ内でタイムラインを構築しないでください。
- ループは有限に保ってください。HyperFrames は有限のビデオ時間をレンダリングします。
コアトゥイーンメソッド
- 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 — 有限の数値。HyperFrames では決して
-1にしないでください。可視時間からリピート回数を計算してください。yoyo — repeat と併用して方向を交互にします。 - onComplete、onStart、onUpdate — コールバック。
- immediateRender — from()/fromTo() ではデフォルト
true。同じプロパティと要素を対象とする後続のトゥイーンではfalseに設定し、上書きを避けてください。
トランスフォームと CSS
生の transform 文字列よりも GSAP の transform エイリアスを推奨します。
| 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()。
パフォーマンス
トランスフォームと不透明度を優先
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 のプロパティ名を使用し、transform エイリアスと autoAlpha を優先します。
- delay によるチェーンよりもタイムラインを優先し、位置パラメータを使用します。
addLabel()でラベルを追加して、読みやすいシーケンスにします。- タイムラインコンストラクタに defaults を渡します。
- 再生制御が必要な場合は、tween/timeline の戻り値を保存します。
禁止事項
- レイアウトプロパティ（width/height/top/left）を、トランスフォームで十分な場合にアニメーションしないでください。
- 同じ SVG 要素で svgOrigin と transformOrigin を両方使用しないでください。
- タイムラインでシーケンス化できる場合に、delay でアニメーションをチェーンしないでください。
- DOM が存在する前にトゥイーンを作成しないでください。
- クリーンアップをスキップしないでください — 不要になったトゥイーンは必ず強制終了してください。
- HyperFrames コンポジションで無限リピート値を使用しないでください。可視時間から計算した有限のリピート回数を使用してください。
クレジットと参考資料
- HyperFrames アダプターのソース：
packages/core/src/runtime/adapters/gsap.ts。 - GSAP ドキュメント：https://gsap.com/docs/v3/
- GSAP タイムラインの一時停止とシークの動作：https://gsap.com/docs/v3/GSAP/Timeline/pause%28%29/