mcpField
G
gsap-animation-composition

gsap-animation-composition

github.com/calesthioクリエイティブ・メディア219111 回インストール15 週間前に更新
リポジトリ

gsap-animation-composition について

複数のビート、テキストやSVGの演出、制御可能な再生ヘッドを扱うメディア制作向けGSAPアニメーションスキルです。タイムライン構成、決定論的なフレームキャプチャ、レンダリングのライフサイクル管理を扱います。

主な機能

  1. 01ネストしたタイムラインとビートの構成
  2. 02単語・行・文字単位のテキスト演出
  3. 03SVGの描画・モーフィング・パス移動
  4. 04FLIPによるレイアウト遷移
  5. 05フレーム単位の明示的な時間制御
  6. 06レスポンシブと動きを減らす設定への対応

活用シーン

  1. 01複数のビートが重なる映像シーケンスの制作
  2. 02単語単位・行単位のテキスト表示
  3. 03ブラウザレンダリングで指定フレームをキャプチャ

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/calesthio/generative-media-skills --skill gsap-animation-composition

インストール後、Claude Code で/gsap-animation-compositionを入力して読み込まれたか確認します。

同梱ファイルEVAL.md

詳細

GSAP によるアニメーション構成

個別の CSS トランジションや単純なフレーム補間では表現しにくい振り付けがメディア構成に必要な場合は、GSAP を使用します。たとえば、複数のビートが重なるシーケンス、文字単位のタイポグラフィ、SVG のストローク描画やシェイプのモーフィング、曲線のパス、レイアウト状態のトランジション、あるいは 1 つの再生ヘッドで制御する再利用可能なモーション言語などです。

このスキルでは、メディア制作におけるアニメーションエンジンとしての GSAP を扱います。ホストレンダラーのコンポジション契約、編集上の判断、オーディオタイムライン、アセット台帳、アクセシビリティレビュー、デリバリーワークフローに取って代わるものではありません。

根拠とバージョンに関する方針

以下のラベルを全体で使用します。

  • 文書化された事実：公式の GSAP、W3C、またはブラウザーのドキュメントに記載されている動作です。
  • 制作上のヒューリスティック：実用的なデフォルト設定です。ブリーフ、ブランドシステム、レンダラー、または測定結果に応じて調整してください。
  • 実証的な観察結果：実際のコンポジション、プレビュー、レンダリング、または対象デバイスで測定した結果です。

GSAP の API、プラグインのパッケージング、ライセンス、フレームワークとの連携は変わりやすいものです。以下の API とライセンスに関する情報は、2026-07-12 時点で確認済みです。本番で使用する前に、インストール済みの GSAP バージョン、公式のインストールガイダンス、プラグインのドキュメント、最新のライセンスを再確認してください。

GSAP が適切か判断する

以下のいずれかが成果物の中心となる場合は、GSAP を選択してください。

  • 多数の連動するアニメーションビートで、ラベル、オーバーラップ、またはネストされたタイムラインを共有する必要がある。
  • デザインされたリビールのために、テキストを単語、行、または文字に分割する必要がある。
  • SVG パスを描画、モーフィングする、またはオブジェクトを動かす必要がある。
  • レイアウト変更時に、FLIP トランジションによって見た目の連続性を保つ必要がある。
  • ブラウザー上で動作するコンポジションで、プレビューやフレームキャプチャにシーク可能な 1 つの再生ヘッドが必要である。
  • レスポンシブなバリエーションで、関連性を保ちつつ、振り付けを実質的に変える必要がある。

以下の場合は、よりシンプルな仕組みを優先してください。

  • 1 つの要素をフェード、移動、拡大縮小、または回転させるだけである。
  • ホストの動画ランタイムが、簡潔なフレーム補間やスプリングのプリミティブをすでに備えている。
  • 通常の編集、コンポジット、またはキーフレームのほうが、受け取るチームにとって修正しやすい。
  • 成果物が静止画、交換用アセット、またはブラウザー環境で動作しないネイティブアプリケーションのアニメーションである。

存在するという理由だけでプラグインを追加しないでください。各プラグインは、実装上のリスクを大幅に減らすか、意図したモーションを改善するものでなければなりません。

モーションの契約を定める

アニメーションコードを書く前に、以下を記録してください。

  • コンポジションの寸法、アスペクト比、フレームレート、長さ。
  • オーディオやナレーションの基準点を含む、シーンとビートのタイムコード。
  • 画面に表示する正確なテキストと、最後に保持する状態。
  • レイヤー名、セレクター、SVG パス ID、変形の基準点。
  • アニメーション化する各要素の登場、強調、トランジション、退場の目的。
  • モーショントークン：デュレーションの種類、イージングの種類、スタッガー方針、移動距離の上限、オーバーシュートの方針。
  • レスポンシブ版と視覚効果を抑えた版。
  • 再生ヘッドを制御するレンダラー。
  • プラグインのインポートと最新のライセンス確認。
  • レビュー用フレームと失敗のしきい値。

レンダラーが任意のフレームをキャプチャする場合、順不同で再生してもコンポジションが正しくなければなりません。リアルタイムプレビューが美しくても、決定論的にレンダリングできる証拠にはなりません。

制御可能なタイムラインを1つ作成する

文書化されている事実： GSAP の Timeline にはトゥイーンやネストされたタイムラインが含まれ、それらを一括して制御できます。位置パラメーターを使うと、子要素を絶対時間、タイムラインの終了時刻からの相対位置、ラベルからの相対位置、または < や > などのマーカーを使った直前に追加した子要素からの相対位置に配置できます。タイムラインには、pause()、seek()、time()、progress()、totalProgress() などの制御機能があります。

実装上の偶発的なステップではなく、編集上の節目を表す意味のあるラベルを使います。

const timeline = gsap.timeline({
  paused: true,
  defaults: {duration: 0.42, ease: "power3.out"},
});

timeline
  .addLabel("claim", 0.4)
  .from(".claim-line", {yPercent: 110, stagger: 0.07}, "claim")
  .addLabel("proof", "claim+=0.85")
  .from(".proof-mark", {scaleX: 0, transformOrigin: "left"}, "proof")
  .from(".proof-label", {opacity: 0, y: 16}, "<0.12")
  .to(".claim-group", {opacity: 0, duration: 0.24}, ">+1.1");

これは一例であり、タイムラインの必須構成ではありません。

本番環境でのルール：

  • 台本、音楽、または編集上のイベントに対応する場合は、claim、proof、turn、cta などのラベルを使います。
  • 一貫したモーションのまとまりにはタイムラインのデフォルト値を使い、必要に応じて意図的に上書きします。
  • シーンや意味上のまとまりごとにタイムラインをネストし、マスタータイムラインに戻します。
  • 手動で計算した遅延を連鎖させるより、位置パラメーターを優先します。
  • レンダリングするメディアでは、タイムラインを有限にします。無限リピートでは、監査可能な最終状態がありません。
  • 特に再レンダリング、レスポンシブ対応での再構築、または状態を繰り返し変更する場合など、両方の端点を明示する必要があるときは fromTo() を使います。それ以外の場合は、よりシンプルな to() または from() を優先します。
  • 同じプロパティで CSS トランジションと GSAP を競合させないでください。
  • GSAP がトランスフォームを制御する場合は、GSAP を使ってトランスフォームの状態を一貫して設定します。
スタガー

文書化されている事実： GSAP のスタガーには、数値、オブジェクト、関数を指定できます。オブジェクト設定では、each または合計 amount を使って開始時刻を分散し、from で起点を選び、グリッドを考慮し、軸を制限し、分散にイージングを適用できます。

スタガーは、階層、方向性、リズムを表現するために使います。個々の節目を設計する代わりに使わないでください。テキストでは、最後の単位が表示された後も、最終的なフレーズを十分な時間読み取れるようにします。グリッドでは、DOM の順序と視覚上の順序が一致すると決めつけず、実際のレスポンシブレイアウトでテストしてください。

フレームキャプチャを決定論的にする

通常の GSAP 再生はブラウザーのアニメーションループによって駆動されます。文書化されている事実： gsap.ticker は requestAnimationFrame からグローバルタイムラインを更新します。ブラウザーのスケジューリングや、非表示タブでのスロットリングにはばらつきがあります。そのため、正確なフレームを要求する動画レンダラーでは、実時間での再生を待つのではなく、時間を明示的に制御する必要があります。

ホスト側で一時停止したタイムラインをシークできる場合は、次のパターンを使います。

const timeline = buildTimeline();
timeline.pause(0);

export function renderAtFrame(frame, fps) {
  const time = frame / fps;
  timeline.time(Math.min(time, timeline.duration()), false);
}

ホスト側で正規化された進行度が必要な場合は、次のようにします。

timeline.totalProgress(frame / Math.max(1, totalFrames - 1), false);

レンダラー固有の統合には別のアダプターを使う場合もありますが、次の不変条件を守ってください。

  1. 必要な DOM、フォント、SVG、ローカルアセットの準備ができた後、同期的にタイムラインを構築します。
  2. キャプチャ開始前にタイムラインを一時停止します。
  3. 時間は、要求されたフレームと宣言された fps だけから導きます。
  4. 入力値を固定します。乱数をシードするか、事前に計算してください。フレームの評価中に Math.random() を呼び出さないでください。
  5. ネットワークリクエスト、時刻、ユーザー入力、スクロール状態、非同期コールバックをアニメーションの状態として使わないでください。
  6. 後方へシークしたときに正しい状態へ復元されるようにします。
  7. コールバックによる副作用を冪等にするか、任意のシーク中は抑制します。

gsap.ticker.fps(30) を、決定論的な 30 fps レンダリングと混同しないでください。これはティッカーのコールバックをスロットリングするものであり、ブラウザーのスケジューリングをフレームレンダリングの契約にするものではありません。

制作上の問題に応じてプラグインを選ぶ

実際のビルドに含まれるプラグインのみを、現在のパッケージバージョンに対応した公式のインストール方法で登録します。

制作上の問題適切な機能主なレビューリスク
単語、行、文字の動きの演出SplitText意味の変化、行の折り返しの崩れ、クリーンアップ漏れ、テキストへのアクセシビリティの喪失
SVG の線を描画するように表示するDrawSVGパスの長さが不適切、圧縮後に線が細すぎる、最終状態に意味がない
ある SVG シェイプを別のシェイプに変形するMorphSVG点の対応付けが不適切、自己交差、意図しないシルエット、元のパスとの互換性がない
オブジェクトをパスに沿って移動または向きを変えるMotionPath座標空間の誤り、予期しない回転、パスがクロップ範囲外にある、乗り物酔い
計測したレイアウト状態間をアニメーション化するFlip古い計測値、キャプチャ中のリフロー、不明瞭な終了レイアウト
プロジェクト固有のモーションカーブを定義するCustomEase過剰適合または極端なカーブ、一貫性のない命名、アクセスしにくい加速
ページのスクロールとアニメーションを連動させるScrollTriggerスクロールを明示的なタイムラインの進行度に変換しない限り、固定時間の動画には不適切
テキストの分割

分割用のラッパーは、作成したコピーではなく実装レイヤーとして扱います。ソース内のテキストを一字一句そのまま保持し、納品先で支援技術がどのように動作するかを確認します。行の折り返しやグリフのメトリクスは変わる可能性があるため、分割する前に本番用フォントの読み込みを待ちます。レスポンシブな行の折り返しが変わった場合は、分割したテキストを再構築し、元に戻します。

固定の動画レンダリングでは、デザイン上必要な場合、承認済みの改行位置を保存します。偶然のブラウザー幅によってヒーローコピーが決まることのないようにします。

SVG の描画、モーフィング、パス
  • 元のパスを整理し、意図的な viewBox を設定します。
  • 各ピボットと座標系を記録します。
  • 納品解像度で開始、中間、最終のシルエットを確認します。
  • 元のシェイプとターゲットのシェイプに意味上の関連性を持たせます。モーフィングでは、技術的な目新しさを見せるだけでなく、変形を伝える必要があります。
  • 最終的な動画圧縮後に細い線をテストします。
  • キャラクターやオブジェクトのリグでは、すべてのパスを個別に変形させるのではなく、作成時に設定したピボットを中心に、安定したグループをアニメーション化します。
FLIP トランジション

最初の状態をキャプチャし、最終レイアウトを適用してから、計測した差分をアニメーション化します。決定的なレンダリングのため、データとレイアウトの入力を固定します。最終状態がフォントの読み込み、ネットワークデータ、レスポンシブ計測に依存する場合は、状態を記録する前にそれらを確定します。

レスポンシブ対応と動きを減らすバリアント

文書化された事実： gsap.matchMedia() は、ネイティブのメディアクエリに対するセットアップを実行し、アニメーションをコンテキスト内に収集して、条件に一致しなくなったときに元に戻せます。また、幅のクエリと (prefers-reduced-motion: reduce) を組み合わせることができます。

レスポンシブ対応のバリアントは、デスクトップ向けの動きの演出を小さな画面に押し込むのではなく、階層構造を保つために使います。アスペクト比が変わったら、改行位置、パスのジオメトリ、移動距離、スタガーの方向、ラベルのタイミングを変更します。関連するレイアウトが安定してからタイムラインを再構築します。

インタラクティブなコンテンツでは、ユーザーの設定に従い、必要に応じて操作コントロールを用意します。動きを減らす場合は、大きな範囲の移動、パララックス、急速なズーム、回転の代わりに、カット、短いフェード、部分的な強調、安定した最終状態を使えます。

事前に録画した動画では、エクスポート後に prefers-reduced-motion でピクセルを変更することはできません。視聴者や配信先に、動きを減らした別バージョンのレンダリングが必要かどうかを判断します。

文書化された事実： WCAG 2.2 の SC 2.3.3 では、本質的でない操作によって開始されるモーションアニメーションは、本質的なものを除き、無効にできるようにすることが定められています。SC 2.3.1 では、一般的な閃光のしきい値および赤色の閃光のしきい値を下回る場合を除き、コンテンツがいずれかの1秒間に3回を超えて閃光しないことが求められています。レンダリングした動画は、想定される最大の表示サイズでテストし、ループ動画はループ再生しながらテストします。

クリーンアップとフレームワークのライフサイクル

文書に記載された事実： gsap.context() は、関数内で作成されたアニメーションを収集し、セレクターのスコープを設定して、収集したアニメーションを元に戻すことができます。gsap.matchMedia() は内部でコンテキストを使用します。元に戻す処理では、収集したアニメーションを破棄し、記録されたアニメーション開始前の状態を復元します。カスタムイベントリスナーは、引き続き明示的なクリーンアップが必要です。

タイムラインは、マウントされたコンポジションまたはレスポンシブ状態ごとに一度だけ作成してください。破棄時には、次の処理を行います。

  • コンテキストまたは match-media オブジェクトを元に戻す。
  • カスタムイベントとティッカーのリスナーを削除する。
  • 分割テキストと一時的なラッパーを元に戻す。
  • レンダラー固有のオブザーバーを破棄する。
  • 切り離された DOM ノードや SVG ノードへの参照をクリアする。

React ベースのレンダラーでは、現在の公式 GSAP React インテグレーション、または同等のライフサイクルに安全に対応するエフェクトを使用してください。レンダリングのたびにタイムラインをインスタンス化しないでください。

パフォーマンスとレンダリングの信頼性

本番環境での経験則：

  • 高頻度の動きには transform と opacity を優先します。他のプロパティが不適切だと決めつける前に、計測してください。
  • プロファイリングなしに、大きなぼかし、フィルター、シャドウ、マスク領域を多数のレイヤーにわたってアニメーションさせないでください。
  • SVG のパスの複雑さは、出力解像度に見合うものにしてください。
  • 繰り返し呼び出されるインタラクションのコールバック内でタイムラインを構築するのではなく、安定したタイムラインを事前に作成してください。
  • セレクターのスコープをコンポジションのルートに限定してください。
  • アニメーション対象のプロパティごとに所有者を一つにしてください。
  • リモートアセットをローカルに固定し、キャプチャ前にフォントの読み込みを待ってください。
  • 長時間または高解像度のエクスポートを確定する前に、負荷の高い短い区間をレンダリングしてください。

実測結果を記録してください。ブラウザーと GSAP のバージョン、レンダラー、GPU／ソフトウェアの処理経路、フレームサイズ、fps、同時実行数、ドロップまたは重複したフレーム、メモリの動作、プレビューとレンダリングの差異を記録します。

ライセンスと権利の確認

このスキルを含むリポジトリは MIT ライセンスです。これは GSAP のライセンスには影響しません。

文書に記載された事実、2026-07-12 に確認： 現在の公式ページでは、Webflow の Standard「No Charge」GSAP License の発効日が 2025 年 4 月 30 日、最終更新日が 2025 年 5 月 30 日とされています。このライセンスは、商用プロジェクトを含む、許可されたウェブサイト、ウェブアプリケーション、デジタルインターフェイスへの実装での使用を許可します。同意がない場合、Webflow のビジュアルアニメーション作成機能と競合する、ユーザーがコードなしでビジュアルアニメーションを作成できるツールでの使用は禁止されています。また、競合製品のためのリバースエンジニアリングと、所有権表示の削除も制限されています。ライセンスページには更新される可能性があると記載されているため、本番環境で使用する前に再確認してください。

別個の greensock/gsap-skills ドキュメントリポジトリには MIT ライセンスが適用される場合がありますが、それによって GSAP のランタイムやプラグインが再ライセンスされるわけではありません。ドキュメントソースのライセンスから、ランタイムの利用権を推測しないでください。

リリース前に、次のことを行ってください。

  • コンポジションまたはツールを配布し、運用する主体を特定する。
  • 現行の GSAP ライセンスとパッケージの通知を確認する。
  • ビジュアルアニメーション作成ツール、エディター製品、テンプレート・アズ・ア・サービス、サブライセンス、再配布、または競合するかどうか曖昧な用途について、権利者または法律顧問にエスカレーションする。
  • パッケージとデプロイに必要なサードパーティの通知を保持する。
  • フォント、ロゴ、イラスト、SVG アートワーク、音楽、ソースメディア、肖像の権利を個別に確認する。

これは本番環境におけるリスクについての指針であり、法律上の助言ではありません。

レビューと品質保証

以下の順序で構成をレビューします。

  1. 契約条件： 寸法、fps、再生時間、正確なコピー、承認済みアセット、プラグイン、ライセンス状況。
  2. 決定性： クリーンな実行環境で同じフレームを2回キャプチャし、シーンの境界とシークで戻った場合を比較します。
  3. タイミング： ラベルをナレーション、音楽、編集イベントに照らし合わせ、最後の静止時間に表示内容を読み取れることを確認します。
  4. モーション： 動きの軌跡、ピボット、モーフィング後のシルエット、パスの向き、FLIP の連続性、イージング、オーバーシュートを確認します。
  5. タイポグラフィ： フォントの読み込み、改行、ラッパーのクリーンアップ、グリフの整合性、最終状態の読みやすさを確認します。
  6. アクセシビリティ： 動きを減らす設定での出力、点滅、広範囲にわたる動き、テキストのコントラスト、動きだけで伝えている情報を確認します。
  7. パフォーマンス： 最も動きの多い部分と最終出力解像度のプロファイルを確認します。
  8. 出力： 抜き出したフレームと全編再生を確認し、クリッピング、アセットの欠落、レイヤーのフリーズ、圧縮による劣化、音声の同期ずれがないことを確認します。

重大な不具合には、フレーム出力の非決定性、安全でない点滅、インタラクティブな画面で必要な動きを減らす設定への対応の欠如、必須テキストの判読不能、最終的な SVG シルエットの破損、ライセンスのない使用、固定時間レンダリング中に実時間やスクロール状態に依存するタイムラインなどがあります。

例1：動きのあるローンチ訴求

これは完全な例であり、必須の定型ではありません。

制作意図： ナレーションなしで、正確なブランドコピーを使った6秒間の9:16製品ローンチ用インサートを制作します。最初の訴求はすぐに表示し、根拠となる情報は読みやすく保ち、動きを減らしたSNS向けバリエーションも用意する必要があります。

入力と制約： 承認済みフォントファイル、コピー Review less. Decide sooner.、30 fps の 1080x1920、最終 CTA ロックアップ、全画面の点滅は禁止、GSAP と SplitText はレビュー済みの条件下で利用可能です。

計画：

00:00.00-00:00.35  Background and clipping masks already stable.
00:00.35-00:01.15  Split headline by words; reveal from lower mask with 0.07 s stagger.
00:01.15-00:02.20  Hold complete claim.
00:02.20-00:03.05  Draw proof underline; reveal source-safe proof label 0.12 s later.
00:03.05-00:04.45  Hold claim and proof without motion.
00:04.45-00:05.10  Exit claim as one group; do not scramble characters.
00:05.10-00:06.00  CTA lockup, static final state.

実装方針：

  • 分割する前に、正確なフォントを読み込みます。
  • claim、proof、cta のラベルを付けた、6秒間の一時停止状態のマスタータイムラインを使います。
  • タイムラインの時間を frame / 30 で制御します。
  • 元の見出しテキストをそのまま保持し、ティアダウン時に SplitText のラッパーを元に戻します。
  • 動きを減らす設定でのバリエーションでは、訴求を0.18秒のグループフェードで表示し、根拠となる情報はそのままカットで切り替え、同じ静止時間を保ちます。

この方法が有効な理由： 単語ごとの段階表示で文のリズムを表現しつつ、根拠となる情報を長く表示して理解を促します。決定性のある再生ヘッドにより、プレビューとレンダリングが一致します。

期待される結果： コピーが正確で、キャプチャ間で改行が変わらず、最終 CTA が安定し、繰り返しレンダリングしたフレームが一致します。

起こりやすい不具合： 分割後にフォントが読み込まれる、文字ごとの段階表示によって読むのに時間がかかりすぎる、レスポンシブな再構築後にラッパーが残る、シーク時にタイムラインのコールバックが2回発火する、退出アニメーションが終わる前に CTA が表示される。

有意義なバリエーション： 16:9 ではラベルを維持しつつ、縦に並べた単語を2行に置き換え、縦型デザインを中央で切り抜くのではなく、移動距離を短くします。

例 2：SVG のルートからマークへの変形

これは完全な例であり、必須の定型ではありません。

制作の意図： 8 秒の解説用トランジションを作成します。配送ルートが製品の承認済みシンボルに変化し、プロセスの説明からブランドのエンドカードへとつなげます。

入力と制約： 承認済みの SVG ルートとロゴのパス、1920x1080、30 fps、落ち着いたネイビーの背景、ランダムなパーティクルは使用しない、H.264 圧縮後もストロークが保たれること、承認済みのモーフ以外ではロゴの形状を変更しないこと。

ワークフロー：

  1. 両方の SVG をレビュー済みの単一の viewBox に正規化し、冗長なパスの点だけを簡略化して、オリジナルをアーカイブします。
  2. DrawSVG を使用して、00:00.40 から 00:01.80 までルートを表示します。
  3. MotionPath を使用して、小さな荷物マーカーを 00:00.55 から 00:02.00 までルートに沿って移動させます。荷物のラベルを正立したままにする必要があるため、自動方向調整は無効にします。
  4. 完成したルートを 0.6 秒間表示します。
  5. 00:02.60 から 00:03.55 までに、承認済みのルートパスを承認済みのシンボルにモーフィングします。
  6. 弾むようなオーバーシュートを避けて動きを落ち着かせ、ワードマークを表示し、00:08.00 までロゴ一式を表示します。
  7. フレーム 0、12、30、54、78、92、107、239、およびモーフの中間点にシークして確認します。

効果がある理由： 各プラグインに意味上の役割が 1 つずつあります。ルートの進行、荷物の移動、そしてブランドアイデンティティへの変形です。最後に長く表示することで、ブランドマークを編集点として使いやすくなります。

期待される結果： 荷物は回転せずにパスに沿って移動し、モーフで自己交差が発生せず、最終的なシンボルは承認済みのソースと完全に一致します。

よくある失敗： 座標系が一致しない、圧縮後にパスのストロークが細くなりすぎる、パスの対応付けによって結び目ができる、マーカーがクロップ範囲から外れる、最終形状が承認済みのマークとほぼ一致するものの完全には一致しない。

有意義なバリエーション： ブランドの形状を変更せずにパスをきれいにモーフィングできない場合は、MorphSVG を無理に使わず、シルエットが重なる部分でマッチカットまたはマスク付きクロスフェードを使用します。

出典

2026-07-12 に確認した公式および権威ある情報源：

コメント

Markdown 対応