ホーム / 全スキル / デザイン＆モーション / gsap-timeline
English (EN)简体中文 (ZH)日本語 (JA)
デザイン＆モーション · greensock/gsap-skills

gsap-timeline

gsap.timeline()、位置パラメータ、ネスト、再生制御を網羅したタイムライン向け公式GSAPスキル。アニメーションの順次実行、キーフレームの演出、またはユーザーがアニメーションの順序付け、タイムライン、実行順序について質問した場合（GSAP、またはタイムラインをサポートするライブラリを推奨する場合）に使用します。

L1 基本 · ソース登録のみV1 コミット固定Dual-pass Audit
Author greensockGitHub greensock/gsap-skills ↗Stars 15326License MIT（仓库根 LICENSE，Copyright (c) 2026 GreenSock；GitHub API spdx_id=MIT；每个 SKILL.md frontmatter 亦写 license: MIT）Commit aed9cfd327
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

全8スキルの中で2番目にコンパクト（4.4 KB。gsap-performanceの4,139 Bに次ぐサイズ）で、1つの目的に特化：「複数ステップのアニメーションをどう配置するか」を位置パラメータ、defaults、ラベル、ネスト、再生制御という列挙可能なルールとして整理。

skills/gsap-timeline/SKILL.md
Apply when building multi-step animations, coordinating several tweens in sequence or parallel, or when the user asks about timelines, sequencing, or keyframe-style animation in GSAP.
説明文に直接トリガーワード（sequencing / timeline / keyframes / choreograph / animation order）を含めており、ユーザーが「順番に再生」「演出・振り付け」と言った際にヒットします。本文には本テーマと無関係なAPIは含まれていません。

「タイムラインのどこに配置するか」を勘から4つの列挙型（絶対秒数、相対値（+= / -=）、ラベル、プレースホルダー（< / >））へと体系化。

skills/gsap-timeline/SKILL.md
Third argument (or position property in vars) controls placement:
これはtimelineで最も間違いやすい点です（デフォルトは末尾追加で、基準点は「直前に追加されたアニメーションの終了位置」）。本スキルは "<" = 直前のアニメーションの開始と同時、"<0.2" = 直前の開始位置から0.2秒後、と明記してモデルの推測を防止します。

defaultsを活用して共通のduration/easeをtimelineコンストラクタに集約し、各子tweenでの重複パラメータ指定を根本から排除。

skills/gsap-timeline/SKILL.md
Pass defaults into the timeline so all child tweens inherit:
サンプルコードの tl.to(".a", { x: 100 }).to(".b", { y: 50 }) では、両方の子tweenが0.5s / power2.outを継承します。これはDo Notの「defaultsの指定を忘れない」に対応しています。

labelsにより演出の可読性とシーク性を向上：addLabel + play("outro") + tweenFromTo によって「チャプター移動」を1行で実現。

skills/gsap-timeline/SKILL.md
Add and use labels for readable, maintainable sequencing:
tweenFromToのセマンティクス（元のtimelineを一時停止し、再生ヘッドをintroからoutroまでスクラブする新しいTweenを返す）も明確に記述されており、アニメーションそのものと誤解するのを防ぎます。

ネストしたtimelineによる親（master）/ 子（child）構成を主要な再利用手法として提示（子timelineを独立して構築後、addで親タイムラインに追加）。

skills/gsap-timeline/SKILL.md
Timelines can contain other timelines.
Do Notと連携：ScrollTrigger付きのアニメーションをtimeline内に入れてはならない（ScrollTriggerは最上位のtween/timelineにのみ適用可能という、gsap-scrolltriggerと整合したスキル間の明確な境界線）。

2つのセマンティクス上の誤解（位置パラメータのデフォルト基準点、およびtimelineのdurationはコンストラクタの引数ではなく子要素によって決まる点）を明示的に是正。

skills/gsap-timeline/SKILL.md
❌ Forget that **duration** on the timeline constructor is not the same as tween duration; timeline “duration” is determined by its children.
前者の落とし穴は「+=0.5は全体に対する相対値と勘違いすること」、後者の落とし穴は「timeline({duration:1})で全体が圧縮されると勘違いすること」です。どちらも❌形式で明記されています。

2コア機能

01シーケンスおよび並行演出：デフォルトで末尾に追加し、位置パラメータでtweenを絶対時刻または相対アンカーに配置
02位置パラメータの4形態：秒数 / += -= / ラベル / < > プレースホルダー（相対オフセット含む）
03defaultsの継承：duration/easeなどの共通パラメータをtimelineコンストラクタに集約
04ラベルとジャンプ：addLabel / play("label") / tweenFromTo(intro, outro)
05ネストによる再利用：子timelineを構築後に親タイムラインへaddで追加
06全体再生制御：play/pause/reverse/restart/time/progress/kill

3外部依存関係

KindDependency / Endpoint
packagegsap（npm 公共包，timeline 属核心 API）

4推奨統制措置と判定根拠

安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠（ファイルパスと抜粋）
  • SKILL.md: プロンプト指示とルールテキストのみで構成され、スクリプト実行や外部への影響なし
監査ノート： 純粋な指示型スキル：ディレクトリ内にはSKILL.md（4,394 B）のみが存在し、スクリプト、ネットワーク呼び出し、クレデンシャルの読み取り、ファイルの書き込みは一切ありません。本ファイルには外部リンクすらなく（リポジトリ全体のURLスキャンでヒットゼロ）、唯一の依存関係はユーザープロジェクトにインストール済みのgsapのみです。注意点は指示レベルのみであり、エージェントの複数ステップアニメーションの実装スタイルをtimeline＋位置パラメータのパラダイムに固定します（GSAPプロジェクトには利点ですが、プロジェクトが意図的にCSS/keyframesでオーケストレーションしている場合には適しません）。

5二重目の独立検証

  • [ok] 目录资产面：仅 SKILL.md、无脚本/引用 — skills/gsap-timeline/ 下唯一文件 SKILL.md（4,394 B）；无 scripts/、references/、模板。
  • [ok] 外部依赖清单：只有 gsap 包，无网络端点 — 该 SKILL.md 的 URL 正则扫描结果为空（0 条），确认无文档外链；包依赖证据取自 README 的 npm 安装说明。
  • [ok] 位置参数语义描述是否与 GSAP 实际行为一致 — 「+0.5s after last end」「< same start as previous」「<0.2 = 0.2s after previous start」与 GSAP position parameter 官方语义一致，无编造。
  • [ok] tweenFromTo 描述是否准确 — 正文写明它会暂停 timeline 并返回一个把 playhead 从 intro 拖到 outro 的新 Tween（no ease），与官方 API 行为一致。
  • [ok] 与 gsap-scrolltrigger 的边界是否自相矛盾 — 本文件 Do Not「Nest animations that contain a ScrollTrigger」与 gsap-scrolltrigger「Do Not 把 ScrollTrigger 放在 timeline 子 tween 上」方向一致，互为印证。
  • [ok] 安全反例搜索 — token 扫描：curl/wget/fetch(/exec(/child_process/process.env/.env/API_KEY 零命中；文件内无代码可执行单元（仅代码块中的示例）。
  • [ok] 元数据（license/stars/commit） — frontmatter license: MIT；仓库 MIT；本地 HEAD = pin aed9cfd…；GitHub API stars 15326 / pushed_at 2026-07-29T17:36:08Z。
  • [ok] 与 examples 的呼应 — examples/vanilla/main.js 用 position parameter（"+=0.2"、"-=0.1"）按本 skill 规则编排 tl.to 链，可作可运行参照。

6結論

  • 極小フットプリントで明確な課題を解決：4,394 Bでtimelineの主要機能を網羅し、検索・ロードコストが低く、常駐の基礎スキルとして最適。
  • 実行可能なメンタルモデルを提供：位置パラメータの4形態と「直前のアニメーション終了位置がデフォルト基準」の明示により、頻出するタイミングのバグを直接排除。
  • defaultsとlabelsによる高い保守性：共通パラメータの集約と、チャプターの命名・シークを実現。
  • スキル間の明確な境界線：ScrollTriggerは最上位にのみ設定可能であることを明記し、gsap-scrolltriggerとの意味的競合を防止。
  • 外部リンク・追加依存ゼロ：Web取得やインストールは行わず、導入済みのgsap以外との外部通信も一切なし。
    • 最適な用途： GSAPを用いた複数ステップ/複数要素の演出を行うあらゆるプロジェクトに最適：登場シーケンス、キーフレーム風アニメーション、巻き戻しやシークが必要なデモなど。gsap-coreやgsap-scrolltriggerとの併用に適しています（前者が構文を提供し、後者がスクロール連動を処理）。
    不向きな用途： 単一ステップのシンプルなアニメーションには不向き（timelineを使わずgsap-coreのto()/from()で十分）；GSAPを使用しないプロジェクトには不向き；スキルによるランタイム検証やビジュアルデバッグツールを期待するユースケースには不向き（デバッグ機能はgsap-pluginsのGSDevToolsセクションに該当）。
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload gsap-timeline.tar.gz
    sha256: b2100e5b57129ab4…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit aed9cfd327.