1实现原理 · 为什么它能做到
八个 skill 里第二薄的一个（4.4 KB，仅大于 gsap-performance 的 4,139 B），只做一件事：把「多步动画怎么排」讲成可枚举规则——位置参数、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.
注：描述里直接带 trigger 词（sequencing / timeline / keyframes / choreograph / animation order），宿主在用户说「按顺序播放」「编排」时命中；正文不含任何与本主题无关的 API。
把「放在时间轴哪里」从经验变成四类枚举：绝对秒数、相对（+= / -=）、标签、占位符（< / >）。
skills/gsap-timeline/SKILL.md
Third argument (or position property in vars) controls placement:
注：这是 timeline 最容易写错的地方（默认是追加、且默认参照物是「最近添加的动画的结束」）。skill 明确列出 "<" = 与上一个同起、"<0.2" = 上一个起点后 0.2s，避免模型靠猜。
用 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 把「章节跳转」变成一行。
skills/gsap-timeline/SKILL.md
Add and use labels for readable, maintainable sequencing:
注：tweenFromTo 的语义（暂停原 timeline、返回一个把 playhead 从 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，这是跨 skill 的硬边界（与 gsap-scrolltrigger 一致）。
显式纠正两个语义误解：位置参数默认参照物、以及 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位置参数四形态：秒数 / += -= / 标签 / < > 占位符（含相对偏移）
03defaults 继承：duration/ease 等公共参数下沉到 timeline 构造器
04标签与跳转：addLabel / play("label") / tweenFromTo(intro, outro)
05嵌套复用：子 timeline 编排好之后 add 进主时间轴
06整段播放控制：play/pause/reverse/restart/time/progress/kill
3外部依赖
| 类型 | 依赖 |
|---|---|
| package | gsap（npm 公共包，timeline 属核心 API） |
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- 只覆盖 GSAP timeline，不做通用编排 — 非 GSAP 场景（CSS animation-delay 链、Web Animations API、其它库的序列器）不适用；它假设 gsap 已在项目里可用。
- 极端简略导致细节需外部知识 — 如 tweenFromTo 的返回值语义、时长由子项决定等，一句话带过；若模型上下文有限，仍可能写出时序错的代码（但其 Do Not 已覆盖最常见的两个误解）。
- 生成代码仍需人工验证时序 — visually 的时序正确性无法由文本约束保证，需要真实运行页面看效果。
- 版本漂移 — 结论仅对 pin aed9cfd（2026-04-21）有效；GSAP 后续版本的 timeline API 若有增补，本文不覆盖。
风险提醒：绿色，放心使用。纯指令型 skill：目录内仅 SKILL.md（4,394 B），无脚本、无网络调用、无凭证读取、无文件写入；本文件连外链都没有（全仓 URL 扫描该文件零命中），唯一依赖是用户项目里已经装好的 gsap。注意点仅为指令层：它会把 agent 的多步动画写法固定到 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结论
适合：适合任何用 GSAP 做多步/多元素编排的项目：入场序列、关键帧式动画、需要可回退/可 seek 的演示；适合与 gsap-core、gsap-scrolltrigger 组合使用（前者出写法，后者接滚动）。
不适合：不适合单步简单动画（用 gsap-core 的 to()/from() 即可，不必上 timeline）；不适合不用 GSAP 的项目；不适合期望 skill 提供运行时校验或可视化调试工具的场景（调试类能力在 gsap-plugins 的 GSDevTools 部分）。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 gsap-timeline.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agentb2100e5b57129ab4…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② 上游 GitHub · 原始来源
来源信息 GitHub 原始
作者 / 仓库greensock / greensock/gsap-skills
原始 GitHubgreensock/gsap-skills ↗
Stars15326
最近推送2026-07-29
本 skill commit
aed9cfd327许可MIT（仓库根 LICENSE，Copyright (c) 2026 GreenSock；GitHub API spdx_id=MIT；每个 SKILL.md frontmatter 亦写 license: MIT）
本站信息
收录日期2026-09-06
分类设计
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。