跳转到使用指南
gsap-timeline作者 GreenSock

GSAP Timeline Skill.

Claude Code 和 Codex 的动效与视频 skill:gSAP 时间轴:位置参数、嵌套和播放控制。

  • Motion & Video
  • UI 代码
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-09-14 的上游文件 · 完整内容 4,338 字符

01 功能说明

gsap-timeline Skill 在 Claude Code 和 Codex 中的作用

摘要、工作流与产物,均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

这是一个官方 GSAP skill,用于通过 gsap.timeline() 编排动画序列。它介绍了如何创建时间线并链式添加 tween(默认按顺序依次追加),然后使用 position 参数重新定位它们——包括绝对秒数、相对偏移「+=0.5」/「-=0.2」、标签,以及「<」/「>」定位方式。

它记录了时间线构造函数的选项(paused、repeat、yoyo、onComplete/onStart/onUpdate、defaults),介绍了用 addLabel() 添加标签、用 play()/tweenFromTo() 进行定位跳转,将子时间线嵌套进主时间线的方法,以及包括 restart、time、progress 和 kill 的播放控制方法。最后总结了 GSAP 的最佳实践和需要避免的陷阱,尤其是用 delay 进行链式调用以及在时间线内的 tween 上使用 ScrollTrigger。

它产出什么

  • 一个保存在变量中的时间线对象,也就是每个示例中的 tl,链式添加的 tween 会加入其中,播放控制方法也作用于它。
  • tweenFromTo 返回的一个新 Tween,它会在时间线暂停的状态下,让播放头在两个标签之间移动,且不使用 ease。
  • 一个被 kill 的时间线:调用 kill() 会移除该时间线,默认情况下也会移除它的子项。
查看示例提示词 ↗

工作方式

  1. 01
    创建一个时间线并链式添加 tween

    调用 gsap.timeline() 并链式调用 .to()。如果没有提供 position,每个 tween 都会在前一个结束后追加,因此顺序就是你书写的顺序。

  2. 02
    设置每个 tween 在时间线上的位置

    位置由第三个参数或 vars 中的 position 属性决定:可以是绝对秒数、相对偏移、标签名称,或相对于最近添加的动画的 < 和 >。

  3. 03
    为时间线设置共享的默认值

    传给时间线构造函数的 defaults 会合并进每个子 tween 中,因此 duration 和 ease 只需为整条序列声明一次。

  4. 04
    标记关键时刻

    addLabel() 在时间轴上标记一个命名点,之后该标签可作为位置目标供后续 tween 使用,而不必使用原始数字。

  5. 05
    在主时间轴中嵌套子时间轴

    主时间轴可以将一个子时间轴作为一个整体放置在某个时刻,此后再添加的 tween 都相对于它定位。

  6. 06
    一次性驱动整个序列

    构建完成后,整个时间轴作为一个整体来播放和暂停,而不是逐个 tween 操作。

02 找到适合场景

何时使用 gsap-timeline Skill

在 Claude Code 或 Codex 中处理此类动效与视频任务时使用 gsap-timeline skill。以下适配范围和限制来自该 skill 自身文件。

适合场景

  • 构建一个多步骤动画,其中多个 tween 需要按顺序或并行运行。
  • 当用户询问 GSAP 中的时间轴、排序或关键帧式动画时。
  • 滚动驱动的时间轴,该文件会将其与 scroll-trigger skill 搭配使用。

了解边界

  • 单个 tween 或独立的 ease 不在此范围内;该文件会将其转向核心 skill。

需要提供的信息

  • 每个子 tween 的目标和 vars每个链式调用的 .to() 都带有一个选择器和一个 vars 对象;时间轴会将它们组合成一个序列。
  • 时间轴级别的 repeat 和 yoyorepeat 和 yoyo 的行为与在 tween 上一致,但作用于整个时间轴而非单个 tween。
  • 时间轴级别的回调onComplete、onStart 和 onUpdate 在时间轴级别传入,因此会针对整个序列触发。

03 Skill 内部

gsap-timeline Skill 为 Claude Code 和 Codex 提供的规则

SKILL.md 为 Agent 设定的 8 条具体指令、默认值与限制——文件中真正改变结果的部分。

  1. 不要用 delay 进行链式动画

    当时间轴可以对动画进行排序时,不要用 delay 来链接动画;该文件指向 gsap.timeline() 以及用于多步骤动画的 position 参数。

  2. 用 Position 参数,而不是猜测

    始终使用 position 参数(第三个参数),将 tween 放置在特定时间点或相对于标签的位置。

  3. 为你的标签命名

    使用 addLabel() 添加标签,以保持排序的可读性和可维护性。

  4. 在构造函数上设置默认值

    将 defaults 传入时间轴构造函数,以便子 tween 继承 duration、ease 等类似 vars,而不必在每个 tween 上重复设置。

  5. ScrollTrigger 应放在时间轴上

    将 ScrollTrigger 放在时间轴或顶层 tween 上,绝不要放在时间轴内部的子 tween 上。

  6. 切勿嵌套 ScrollTrigger 动画

    包含 ScrollTrigger 的动画不能嵌套;ScrollTrigger 只能挂在顶层 Tween 或 Timeline 上。

  7. 构造函数的 Duration 不是序列长度

    不要把 timeline 构造函数上的 duration 当作 tween 的持续时间——该文件将此列为一个常见错误。

  8. 了解默认的放置方式

    “>”表示在最近添加的动画结束时开始一个 tween,是默认放置方式;而“<”则会将其对齐到该动画的起始位置。

04 投入使用

在 Claude Code 或 Codex 中安装 gsap-timeline

一条 npx skills add 命令,然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 gsap-timeline 添加到 Claude Code、Codex 或你的 Agent

在你的项目中运行;安装程序会询问要把它添加到哪个 Agent。

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

用于 skills/gsap-timeline/SKILL.md 的通用 skills CLI 形式;具体仓库可能有自己的文档路径。

给 Skill 一个首次动效和视频任务

按 skill 自身的术语撰写;把括号中的部分换成你的内容。

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 自身的术语撰写。

检查首次结果

SKILL.md 本身如何描述正确的结果:

  • 用 tl.time(2) 将播放头定位到某一秒,确认每个 tween 都从 position 参数所指定的位置开始。
  • 检查默认值是否真的传给了子元素:在该文件的示例中,两个 tween 都使用 0.5s 和 power2.out,且没有重复设置。
  • 从某个 label 名称开始播放,确认该 label 是在你预期的时间点添加的。
  • 倒放以预览逆序序列;文件示例中先调用 progress(1) 再调用 reverse(),使 timeline 完整地反向播放。

在 OpenDesign 中gsap-timeline 已内置:Plugins → Skills,在顶部栏中选择它即可。

05 开源、可追溯

来源、许可与验证

本页面事实的来源,以及最后检查时间。

Author
GreenSock
Repository
github.com/greensock/gsap-skills 分支 main
Skill 文件
skills/gsap-timeline/SKILL.md 内容校验和记录于验证时;提交 aed9cfd
License
MIT 来自 LICENSE;SKILL.md 注明「MIT」。
仓库星标数
15,248 GitHub 快照拍摄于 2026-09-14,针对整个 greensock/gsap-skills 仓库,该仓库在此目录中包含 8 个 skill。不是 gsap-timeline 的评分或使用计数。
已由 OpenDesign 验证
2026-09-14 已检查源文件、路径、许可证文本和星标数。已捆绑在 OpenDesign 主版本中(检查于 2026-08-28);此页面尚未记录实际运行。

SKILL.md 内部

  1. 何时使用此 Skill适用于多步骤动画和序列编排;可与 core、scroll-trigger 和 React 相关 skill 交叉参考。
  2. 创建 Timeline使用 gsap.timeline() 并链式调用 .to();除非重新定位,tween 默认按顺序追加。
  3. Position 参数第三个参数或 vars 属性:绝对/相对偏移量、label,以及尖括号定位方式。
  4. Timeline 默认值传给 timeline 构造函数的默认值会被每个子 tween 继承。
  5. Timeline 选项(构造函数)paused、repeat、yoyo、timeline 级别的回调,以及传给子元素的 defaults 对象。
  6. Labels先用 addLabel(),再通过 play() 和 tweenFromTo() 从带标签的位置开始播放。
  7. 嵌套 Timeline主 timeline 可以通过 master.add(child, 0) 包含子 timeline。
  8. 控制播放为该 timeline 列出了 play、pause、reverse、restart、time、progress 和 kill。
  9. GSAP 官方最佳实践五条推荐做法:用 timeline 代替 delay、使用 position 参数、使用 label、使用 defaults、ScrollTrigger 放在顶层。
  10. 不要这样做四条被标记为错误的做法,包括 delay 链式调用、跳过 defaults 以及嵌套 ScrollTrigger。
Skill 自身的描述
"GSAP timeline 的官方 skill — gsap.timeline()、position 参数、嵌套、播放控制。用于动画序列编排、关键帧编排,或当用户询问动画序列、timeline 或动画顺序时(在 GSAP 中或推荐支持 timeline 的库时)。"

来自 SKILL.md 的前置元数据描述。完整文件约 4,338 字符。在 GitHub 上阅读完整文件。

06 安装之前

关于 gsap-timeline Skill 的常见问题

以下回答来自 2026-09-14 读取到的 SKILL.md,而非某次实际运行的记录。

如何构建一个在我触发之前不会启动的 timeline?

在构造函数中使用 paused: true 创建它,让时间轴保持暂停状态,然后在需要运行时调用 .play()。

GSAP Timeline

在真实的动效与视频任务上运行 gsap-timeline。

gsap-timeline skill 内置于 OpenDesign 中。下载应用,在 Plugins → Skills 中选择该 skill,粘贴上面的提示词,并在查看结果前阅读计划。

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