83.3K+ダウンロード
使い方ガイドへスキップ
gsap-timeline作者 GreenSock

GSAP Timeline スキル。

Claude Code と Codex のモーション・動画スキル：GSAP タイムライン（position パラメータ、ネスト、再生制御）

  • モーションと動画
  • UI コード
OpenDesign をダウンロード使い方ガイドを見る
greensock/gsap-skills · skills/gsap-timeline/SKILL.mdSKILL.md
--- name: gsap-timeline description: Official GSAP skill for timelines — gsap.timeline(), position parameter, nesting, playback. Use when sequencing animations, choreographing keyframes, or when the user asks about animation sequencing, timelines, or animation order (in GSAP or when recommending a library that supports timelines). --- ## When to Use This Skill ## Creating a Timeline ## Position Parameter ## Timeline Defaults ## Timeline Options (constructor) ## Labels
2026年9月14日にアップストリームファイルから読み取ったフロントマターとセクション見出し · 全4,338文字

01 できること

Claude CodeとCodexにおいて、gsap-timelineスキルが行うこと

概要、ワークフロー、出力。いずれもスキルの SKILL.md から読み取った内容です。

SKILL.md より2026年9月14日読取 · 実行記録ではありません

スキル自身の言葉で

gsap.timeline()を使ってアニメーションをシーケンス化するための、公式のGSAPスキルです。タイムラインの作成と、デフォルトで末尾に追加されていくトゥイーンの連結、そしてposition引数（絶対秒数、相対的な「+=0.5」／「-=0.2」オフセット、ラベル、「<」／「>」による配置）を使った位置の再指定について解説しています。

タイムラインコンストラクタのオプション（paused、repeat、yoyo、onComplete/onStart/onUpdate、defaults）、addLabel()によるラベル付けとplay()/tweenFromTo()によるシーク、子タイムラインをマスタータイムラインにネストする方法、restart、time、progress、killを含む再生用メソッドについて説明しています。最後にGSAPのベストプラクティスと避けるべき落とし穴、特にdelayを使ったチェーンや、タイムライン内のトゥイーンにScrollTriggerを設定することについて触れています。

生成されるもの

  • 変数に格納されたタイムラインオブジェクトで、すべての例でtlと呼ばれています。連結されたトゥイーンはこれに追加され、再生用メソッドはこれに対して作用します。
  • tweenFromToが返す新しいTweenで、タイムラインが一時停止している間、イーズなしで2つのラベルの間をプレイヘッドがアニメーションします。
  • killされたタイムライン：kill()を呼び出すと、そのタイムラインが削除され、デフォルトではその子も一緒に削除されます。
プロンプト例を見る ↗

仕組み

  1. 01
    タイムラインを作成し、トゥイーンを連結する

    gsap.timeline()を呼び出し、.to()呼び出しを連結します。positionを指定しない場合、各トゥイーンは前のトゥイーンの終了後に追加されるため、順序は記述した順になります。

  2. 02
    各トゥイーンの時間位置を配置する

    配置は、第3引数またはvars内のposition プロパティによって設定されます：絶対秒数、相対オフセット、ラベル名、または直前に追加されたアニメーションを基準とした<と>を使用できます。

  3. 03
    タイムラインに共通のデフォルト値を設定する

    タイムラインコンストラクタに渡されたデフォルト値は、すべての子トゥイーンにマージされるため、durationやeaseをシーケンス全体で一度だけ宣言すれば済みます。

  4. 04
    重要なポイントにラベルを付ける

    addLabel() はタイムライン内の名前付きの位置を示すもので、そのラベルは後続のトゥイーンの位置指定として、数値の代わりに使用できます。

  5. 05
    タイムラインをマスタータイムラインにネストする

    マスタータイムラインは子タイムラインを1つの単位として受け取り、ある時点に配置できます。その後のトゥイーンはそれを基準に相対的に追加されます。

  6. 06
    シーケンス全体を一度に制御する

    構築後は、タイムラインをトゥイーンごとではなく1つの単位として再生・一時停止します。

02 適合性を確認

gsap-timeline スキルを使用するタイミング

Claude Code や Codex でこの種のモーションや動画を扱う場合は、gsap-timeline スキルを使用します。適合範囲と制限はスキル自身のファイルから引用しています。

適している場合

  • 複数のトゥイーンを順番、または並行して実行する必要がある、複数ステップのアニメーションを構築する場合。
  • ユーザーがGSAPにおけるタイムライン、シーケンス、キーフレーム形式のアニメーションについて質問した場合。
  • スクロールに連動するタイムラインについては、このファイルはscroll-triggerスキルと組み合わせて扱います。

境界を知る

  • 単一のトゥイーンやイーズ単体は対象外であり、このファイルはそれをコアスキルに振り分けます。

提供すべきもの

  • 各子トゥイーンのターゲットとvars連鎖する.to()呼び出しはそれぞれセレクターとvarsオブジェクトを取り、タイムラインはそれらを1つのシーケンスとして構成します。
  • タイムラインレベルのrepeatとyoyorepeatとyoyoはトゥイーンでの動作と同様ですが、1つのトゥイーンではなくタイムライン全体に適用されます。
  • タイムラインレベルのコールバックonComplete、onStart、onUpdateはタイムラインレベルで渡されるため、シーケンス全体として発火します。

03 スキルの内部

gsap-timelineスキルがClaude CodeとCodexに与えるルール

SKILL.md がエージェントに設定する 8 つの具体的な指示・既定値・制限 — 結果を変える部分です。

  1. delayによる連鎖は行わない

    タイムラインでシーケンス化できる場合、delayでアニメーションを連鎖させてはいけません。複数ステップのアニメーションについては、このファイルはgsap.timeline()とposition引数を参照するよう指示します。

  2. 推測よりposition引数を優先する

    トゥイーンを特定の時間、またはラベルからの相対位置に配置する際は、常に第3引数であるposition引数を使用してください。

  3. ラベルには名前を付ける

    addLabel()でラベルを追加することで、シーケンスの可読性と保守性を保てます。

  4. コンストラクターでのdefaults

    タイムラインのコンストラクターにdefaultsを渡すことで、子トゥイーンがduration、ease等のvarsを個々のトゥイーンごとに繰り返す代わりに継承できるようにします。

  5. ScrollTriggerはタイムラインに設定する

    ScrollTriggerはタイムラインまたはトップレベルのトゥイーンに設定し、タイムライン内の個々のトゥイーンには決して設定しないでください。

  6. ScrollTrigger アニメーションを入れ子にしない

    ScrollTrigger を含むアニメーションは入れ子にしてはいけません。ScrollTrigger はトップレベルの Tween または Timeline にのみ属します。

  7. コンストラクタの duration はシーケンス長ではありません

    タイムラインのコンストラクタの duration を tween の duration として読み取らないでください。ファイルではこれをよくある間違いと呼んでいます。

  8. デフォルトの配置を理解する

    「>」は直前に追加されたアニメーションが終了した時点で tween を開始し、これがデフォルトの配置です。一方「<」はそのアニメーションの開始位置に揃えます。

04 実際に使う

Claude Code または Codex に gsap-timeline をインストール

npx skills add コマンドを実行し、エージェントで最初のタスクを実行して、結果をチェックリストで確認します。

Claude Code、Codex またはお使いのエージェントに gsap-timeline を追加

プロジェクトで実行してください。インストーラーが、どのエージェントに追加するかを尋ねます。

Terminal
npx skills add https://github.com/greensock/gsap-skills --skill gsap-timeline

skills/gsap-timeline/SKILL.md 用の汎用 skills CLI 形式です。リポジトリによっては独自のパスを文書化している場合があります。

スキルに最初のモーション・動画タスクを与える

スキル自身の用語で記述されています。角括弧の部分はご自身の内容に置き換えてください。

Starter prompt
I'm sequencing a [hero banner] animation: [the headline] slides up, then [the CTA button] appears 0.5s later, and [the product shot] scales in at the same start time as the button. I want shared duration and ease defaults on the timeline, and labels for the intro and outro so I can play from either one.

出典：SKILL.md をスキル自身の用語に沿って記述。

最初の結果を確認

SKILL.md 自体が正しい結果として示しているもの：

  • tl.time(2) で再生位置を特定の秒に移動し、各 tween が position パラメータの意図どおりに開始することを確認します。
  • デフォルト値が実際に子要素に反映されているか確認します。ファイルの例では、両方の tween が繰り返し指定せずに 0.5s と power2.out を使用しています。
  • ラベル名から再生して、そのラベルが想定した時点で追加されたことを確認します。
  • 逆再生してシーケンスを逆方向に確認します。ファイルでは progress(1) の後に reverse() を呼び、タイムラインが完全に逆再生されるようにしています。

OpenDesign では gsap-timeline がバンドルされています：上部バーのPlugins → Skillsから選択してください。

OpenDesign をダウンロードクイックスタートを読む

05 オープンソースで追跡可能

ソース、ライセンス、検証

このページの情報の出所と、最終確認日時です。

Author
GreenSock
Repository
github.com/greensock/gsap-skills ブランチ main
スキルファイル
skills/gsap-timeline/SKILL.md 検証時に記録されたコンテンツチェックサム、コミット aed9cfd
License
MIT LICENSE より。SKILL.md には「MIT」と記載されています。
リポジトリスター数
15,248 GitHub スナップショットは greensock/gsap-skills リポジトリ全体に対して 2026-09-14 に取得されたもので、このカタログには 8 つのスキルが含まれています。gsap-timeline の評価や使用数ではありません。
OpenDesign により検証済み
2026-09-14 ソースファイル、パス、ライセンステキスト、スター数を確認済み。OpenDesign メイン版に同梱（2026-08-28 確認）。このページでは実際の実行記録はまだありません。

SKILL.md の中身

  1. このスキルを使うタイミング複数ステップのアニメーションとシーケンス制御に適用され、core、scroll-trigger、React スキルを相互参照します。
  2. タイムラインの作成gsap.timeline() に .to() を連鎖させて呼び出します。位置を再指定しない限り、tween はデフォルトで追加されます。
  3. Position パラメータ第3引数または vars プロパティ：絶対値、相対オフセット、ラベル、角括弧による配置。
  4. タイムラインのデフォルト値タイムラインのコンストラクタに渡されたデフォルト値は、すべての子 tween に継承されます。
  5. タイムラインオプション（コンストラクタ）paused、repeat、yoyo、タイムラインレベルのコールバック、子要素に渡される defaults オブジェクト。
  6. ラベルaddLabel() を使用し、その後 play() と tweenFromTo() でラベル付きの地点から開始します。
  7. タイムラインの入れ子マスタータイムラインは master.add(child, 0) を通じて子タイムラインを含むことができます。
  8. 再生の制御タイムラインに対する play、pause、reverse、restart、time、progress、kill が一覧されています。
  9. GSAP 公式のベストプラクティスチェックマーク付きの5つの実践：遅延よりタイムライン、position パラメータ、ラベル、デフォルト値、トップレベルの ScrollTrigger。
  10. してはいけないことバツ印付きの4つの間違い。遅延の連鎖、デフォルト値の省略、ScrollTrigger の入れ子などを含みます。
スキル自身による説明
「GSAP タイムライン公式スキル — gsap.timeline()、position パラメータ、ネスト、再生制御。アニメーションのシーケンス、キーフレームの調整、またはユーザーがアニメーションシーケンス、タイムライン、アニメーション順序について質問した際に使用します（GSAP 内、またはタイムラインをサポートするライブラリを推奨する際）。」

SKILL.md のフロントマター説明。完全なファイルは約 4,338 文字です。GitHub で完全なファイルを読む。

06 インストールする前に

gsap-timeline スキルに関する質問

回答は 2026-09-14 時点で読んだ SKILL.md に基づくもので、記録された実行結果によるものではありません。

トリガーするまで開始しないタイムラインはどう構築すればよいですか？

コンストラクタで paused: true を指定して作成すると、タイムラインは一時停止した状態になります。実行したいタイミングで .play() を呼び出してください。

GSAP Timeline

実際のモーションと動画タスクで gsap-timeline を実行します。

gsap-timeline スキルは OpenDesign に同梱されています。アプリをダウンロードし、Plugins → Skills でスキルを選択し、上記のプロンプトを貼り付け、結果の前に計画を確認します。

OpenDesign をダウンロードすべてのスキルを見る
ターミナル
npx skills add https://github.com/greensock/gsap-skills --skill gsap-timeline