gsap

gsap 技能概览

gsap 技能能做什么

gsap 技能是面向 HyperFrames compositions 的实用 GSAP 动画参考。它帮助你选对 tween 类型、正确设置属性，并构建在生产环境里表现稳定的 timeline。如果你想要的是一份更偏实现而不是理论的 gsap 指南，这个技能的目标就是让动画更少试错、更快落地。

适合使用这个技能的场景

如果你在写入场动画、motion transition、staggered 序列、由 timeline 驱动的场景，或者可复用的动画效果，就适合用 gsap 技能。它尤其适合 Design Implementation 场景：你已经有视觉规范，需要把它翻译成 gsap.to()、from()、fromTo() 或 gsap.timeline()，同时又不能打乱时序或覆盖已有属性。

值得安装的原因

它的核心价值在于决策支持：该用哪个 GSAP API、哪些 vars 真的重要、哪些默认值容易引发 bug。这个技能还会提示一些实用约束，比如 camelCase 属性名、immediateRender、transform 别名，以及像 will-change 和 quickTo 这类更利于性能的模式。正因为如此，当你需要的是能直接交付的结果时，gsap 技能会比通用提示词更有用。

如何使用 gsap 技能

安装并查看关键文件

使用以下命令安装：

npx skills add heygen-com/hyperframes --skill gsap

先从 skills/gsap/SKILL.md 开始，再看 references/effects.md 获取现成模式；如果动画依赖音频数据，也要查看 scripts/extract-audio-data.py。这个 repo 体量不大，所以这些文件能很快给你大部分真实使用上下文。

给技能一个具体的动画需求

gsap 技能在提示词包含元素、运动目标、时长和约束时表现最好。不要只说“给这个卡片做动画”，而要写成类似：“为产品卡片创建 gsap 入场动画：从下方 24px 处淡入，持续 0.6s，使用 power3.out，三张卡片按 0.12s stagger，不能造成布局偏移，并避免覆盖 hover transform。”这种输入能帮助技能选对 gsap 用法，也能避免它走向含糊的默认方案。

阅读会影响输出质量的代码路径

做实现工作时，优先看核心 tween 方法、常用 vars、transform/CSS 映射、基于函数的值，以及 timelines 相关部分。真正影响输出质量的，往往就是这些内容。如果你需要可复用的 motion 模式，先看 references/effects.md；这里会说明这个 repo 期望如何组织 effect，以及哪些地方会涉及 plugin 依赖。

使用能避免坏动画的工作流细节

尽量使用 GSAP 的 transform 别名，而不是直接拼接原始 transform 字符串；在定时动画开始前，用 gsap.set() 先完成即时状态设置。串联 timelines 时，要有意识地使用 labels 和 position 参数，而不是把所有内容都堆到同一个时间点。如果一个 tween 会多次触达同一个元素或属性，就要特别留意 immediateRender 和 overwrite，否则 gsap 技能很容易生成可见跳变。

gsap 技能常见问题

这个 gsap 技能只能用于 HyperFrames 吗？

它是为 HyperFrames compositions 编写的，但 GSAP 的使用模式本身具有很强的可迁移性。如果你不在 HyperFrames 里工作，仍然可以从这些 API 指南中受益，只是文件结构和生命周期处理可能需要你自己调整。

我需要先有 GSAP 经验吗？

不需要。只要你知道想实现什么动画目标，但不确定该用哪个 API，gsap 技能就适合初学者。它在你能清楚描述元素状态、时序和序列时会更有价值，因为这些细节比泛泛的“让它更顺滑”更能驱动高质量输出。

什么情况下不该用它？

如果你只需要一次性的 CSS transition，或者动效足够简单，可以直接写在样式表里，那就没必要用这个技能。它也不适合需要与 GSAP timelines 无关的自定义运行时架构，或者需求里没有明确目标元素和期望运动状态的场景。

它和通用提示词有什么不同？

通用提示词通常只能产出一个看起来合理的动画想法。gsap 技能更适合那些需要正确 GSAP 语法、更稳妥默认值，以及与实现现实相匹配的 timeline 行为的场景。它能减少围绕 gsap install 式上手流程、tween 选择、属性命名和性能敏感决策的猜测成本。

如何改进 gsap 技能

提供视觉规范，而不只是目标

提升 gsap 输出最快的方法，是把起始状态、结束状态、序列和约束都写清楚。例如：“文本先上移 20px 并在 0.5s 内淡入，然后按钮用 back.out(1.7) 从 0.96 缩放到 1，并且两者都要尊重 reduced motion。”这样能给技能足够的结构，产出更好的 gsap 使用方案。

把元素和冲突风险说明白

请写清楚 selector、元素数量，以及页面上已有的 motion。如果你知道某个属性可能已经在别处被动画处理过，也要说明。最常见的失败点往往不是 tween 本身，而是 overwrite 冲突或 transform 冲突，所以把这些风险提前指出来，效果会立刻更好。

直接要求可实现的输出

如果你想要的是 Design Implementation 结果，第一轮就应该要求输出 timeline 顺序、精确 vars 和 plugin 依赖。比较有效的后续提示包括：“把它改成可复用的 timeline”、“把原始 transform 换成 GSAP 别名”，或者“优化性能并避免 layout thrash”。这些提示会把 gsap 技能推向更适合生产环境的代码，而不是演示级动效。

每次只改一个变量

第一轮之后，每次只调整一个维度：时长、缓动、stagger，或者结构。如果动效显得太急，就让它放缓 ease；如果太慢，就缩短 duration；如果元素之间互相抢占，就要求 overwrite: "auto" 或更清晰的 timeline labels。这样可以让 gsap 技能保持聚焦，也更容易判断下一版是否真的变好了。