gsap-timeline

gsap-timeline 技能概览

gsap-timeline 用来做什么

gsap-timeline 技能帮助你构建并理解 gsap.timeline() 序列：有先后顺序的动画步骤、重叠、标签，以及嵌套播放。当天真正的问题是“如何协调多个动画”，而不是单个 tween 时，就该使用 gsap-timeline 技能——比如编排入场状态、同步多个 UI 元素，或者把一套 motion design 映射成可重复执行的序列。

适合的使用场景

对于做 UI 动效、产品微交互、落地页展开、onboarding 流程，或任何需要可预测时间控制的动画的开发者和设计师来说，这都是很合适的选择。尤其是在 gsap-timeline for UI Design 场景下，当你需要把视觉叙事转换成明确的 timeline 结构时，它特别有用。

这个技能为什么不同

它的核心价值不在于“怎么做动画”，而在于“动画步骤该怎么放”。gsap-timeline 指南重点关注默认顺序、position 参数和播放行为，这样你就能避免脆弱的时间假设。如果你需要滚动控制、单个属性的 easing，或者 React 相关接入，通常有其他 GSAP 技能会更适合作为起点。

如何使用 gsap-timeline 技能

安装并启用

先通过目录里的安装流程完成 gsap-timeline 的安装，然后在开始写代码或提示词之前，把这个技能附加到任务里。一个典型的安装命令是：
npx skills add greensock/gsap-skills --skill gsap-timeline
之后，先阅读技能内容，让模型在生成动画代码前就掌握正确的序列规则。

先读对源码

从 skills/gsap-timeline 里的 SKILL.md 开始。在这个仓库中，它就是唯一的源文件，所以最快的方式是完整读一遍，而不是去找这里并不存在的辅助目录。重点关注：

• 这个技能应该在什么情况下使用
• timeline 创建的默认行为
• position 参数的各种写法
• 关于 timeline 播放和嵌套的说明

把模糊需求变成可执行提示词

当你的提示词里包含动画目标、受影响元素、期望顺序以及任何重叠规则时，这个技能的效果最好。对比下面两种写法：

• 弱： “用 GSAP 把这个做得好看一点。”
• 强： “用 gsap-timeline 先展示 hero 标题，再依次错开显示卡片，然后在卡片结束前 0.2s 淡入 CTA。保持序列清晰，并给主要节奏点加标签。”

在使用 gsap-timeline 时，尽量加入明确的时间意图，比如“重叠”“之后”“同时”或者某个命名标签。这样模型就能选择正确的 position 语法，而不是靠猜。

避免烂 timeline 的工作流

先按节拍拆分 motion，再把每个节拍映射成 timeline 步骤。如果动画里有分支、重复片段，或者可复用的入场/退场状态，尽早要求使用标签和嵌套 timeline。如果你在做 UI 动效，还要说明动画是否必须可逆、可中断，或者是否要跟组件生命周期绑定，因为这会直接影响 timeline 的结构。

gsap-timeline 技能常见问题

gsap-timeline 只适合高级 GSAP 用户吗？

不是。只要你能清楚描述一个序列，它就对新手也友好。主要学习成本在于理解 timeline 默认会自动追加，以及 position 参数如何控制位置。如果你能说明 UI 变化的先后顺序，这个技能通常就足以产出一个可用的初稿。

什么时候不该用它？

当你只需要单个 tween、基础 easing，或者基于 scroll 的编排时，就不要用 gsap-timeline。这些情况下，gsap-core、gsap-scrolltrigger 或 gsap-react 可能更合适。gsap-timeline 技能最强的地方，是时间关系本身就是难点的时候。

它比通用提示词强在哪里？

通用提示词往往只能让 timeline 按“看起来差不多对”的顺序跑起来，但位置控制不够严谨。gsap-timeline 指南给了模型更完整的语言体系——默认追加行为、相对偏移、标签、起止锚点——因此输出更可预测，也更容易维护。

它能帮到 UI 设计工作流吗？

可以，尤其适合设计交付用文字描述 motion、而不是直接给代码的情况。对于 gsap-timeline for UI Design，它能把“标题先出现，卡片依次级联，按钮最后落定”这类描述，转成带明确时间控制的结构化动画方案，而不是松散的顺序堆叠。

如何改进 gsap-timeline 技能

提供时间意图，不只是结果

提升最明显的一步，是明确哪些地方允许重叠。比如，与其说“做得流畅一点”，不如说“让副标题在标题开始后 0.15s 出现”。如果序列需要某个标签，也直接在提示词里点出来，这样模型才能稳定地锚定后续步骤。

给出会改变结构的 motion 上下文

说明这个 timeline 是用于页面加载、hover 交互、弹窗打开/关闭、onboarding，还是循环播放。一次性的入场可以很简单；可逆交互则可能需要更清晰的状态管理和更少的隐含假设。gsap-timeline 技能在这里最有价值：它把意图转成稳定的序列，而不只是动画代码。

注意常见失败模式

最常见的错误是过度使用绝对时间、忘记 tween 默认会 append，以及把互不相关的动画需求混进同一个 timeline。若第一次输出不理想，可以要求把同一序列改写成带标签的版本、减少硬编码秒数，或者把重叠点写得更明确。通常这样会比单纯要求“动画更好看”更能提升清晰度。

用具体修改继续迭代

在第一版之后，可以通过补充元素名称、节奏偏好，以及 reduced motion、响应式、可复用性等约束来细化提示词。不错的后续提示包括：

• “保留同样的 gsap-timeline 结构，但让中间部分重叠 0.25s。”
• “把它改写成带标签的版本，这样我后面好维护。”
• “把它适配成可复用组件，并保持 timeline 容易 reverse。”