gsap-scrolltrigger
作者 greensockgsap-scrolltrigger 是官方 GSAP 技能，用于实现与滚动联动的动画、pin 固定、scrub 跟随和基于视口的触发器。适合 Frontend Development 中需要 gsap-scrolltrigger 指南、安装帮助，或用于视差、固定区块和滚动驱动动效的实用用法时使用。
这个技能得分 78/100，作为 Agent Skills Finder 的收录候选相当稳妥。如果目录用户需要专门面向 ScrollTrigger 的滚动动画，它是可以放心安装的，因为它提供了明确的触发方式、实用示例和使用边界，比通用提示词更能减少试错成本。它不是那种开箱即用的一体化工作流包，但可操作性很强，值得带着少量注意事项收录。
- 对滚动驱动动画、pin 固定、scrub 跟随以及 ScrollTrigger 典型场景给出了明确的触发指导
- SKILL.md 内容较充实，包含多个标题和代码示例，能帮助 agent 直接执行，而不是从零开始
- 提供了清晰的相关技能指引（gsap-core、gsap-timeline、gsap-react、gsap-plugins），有助于正确路由并减少误用
- 没有安装命令或配套支持文件，因此用户必须已经知道如何加载并注册该插件
- 证据表明它在使用指引方面很强，但辅助参考资料较少，处理更深层的边缘情况时支撑有限
gsap-scrolltrigger 技能概览
gsap-scrolltrigger 的作用
gsap-scrolltrigger 技能帮助你用 GSAP 的 ScrollTrigger 插件构建与滚动联动的动画：在滚动时启动和停止动画、固定区块、把进度同步到滚动条，以及在精确的视口位置触发效果。它最适合的场景不是“让某个东西动起来”，而是“让动画以可控方式响应滚动”。
适合谁使用
当你需要营销页面、编辑型版式、长篇叙事、产品演示，或依赖滚动位置的视差动效时，Front-end Development 场景下应该使用 gsap-scrolltrigger 技能。若用户只是想要一个通用动画提示词，只有在滚动行为、时间控制或固定区块这些细节重要时，这个技能才更有价值。
这个技能为什么不同
它的核心优势是对滚动的实际控制能力：start、end、scrub、pin 和 toggle 行为能带来可预测的结果，而这些很难只靠一段普通提示词讲清楚。gsap-scrolltrigger 指南在你希望得到 GSAP 专用建议，而不是与库无关的动画答案时，也尤其有用。
如何使用 gsap-scrolltrigger 技能
正确安装并加载
使用 npx skills add greensock/gsap-skills --skill gsap-scrolltrigger 完成技能安装。实现层面上，先加载 GSAP 和 ScrollTrigger 插件，再通过 gsap.registerPlugin(ScrollTrigger); 只注册一次。如果是在 AI 工作流中使用这个技能，务必让提示词要求输出 ScrollTrigger 专用内容，而不是泛化的 CSS 动画建议。
给技能正确的输入
最好的 gsap-scrolltrigger usage 往往从一个具体的滚动叙事开始：哪个元素要动、进入时发生什么、动画是否要随滚动同步、区块是否要固定，以及用户向回滚动时应该发生什么。一个有力的提示词要足够具体，例如：“创建一个固定的 hero 区块，让标题淡入、图片在该区块从顶部居中滚动到底部居中的过程中从 0.9 放大到 1.1。”
先读仓库文件
先看 SKILL.md，再检查完整文件树里是否有相关示例或实现说明。对这个仓库来说，真正有价值的是核心指引本身：什么时候使用插件、如何注册、以及示例中的触发器配置。如果你要把这个模式迁移到别的代码库，要把 trigger 设置映射到你所用框架的生命周期和 DOM 访问规则。
用模式，而不是只抄片段
gsap-scrolltrigger install 和使用流程里最有用的部分，是理解配置逻辑，而不是机械地复制代码。要保留触发元素、视口位置和动作行为之间的关系。面向生产输出时，应该要求包含无障碍检查、prefers-reduced-motion 的降级方案，以及在 pin 改变页面流时的替代布局。
gsap-scrolltrigger 技能常见问题
gsap-scrolltrigger 只适合高级动画吗？
不是。只要效果依赖滚动位置，它也适合做入门级的滚动动效。主要学习门槛在于理解 trigger、start、end 和 scrub 如何协同工作。
什么时候不该用这个技能？
如果需求只是一个不依赖滚动的简单入场动画，或者项目已经统一使用另一套 motion library，就不适合用 gsap-scrolltrigger。当页面必须在没有 JavaScript 驱动的滚动逻辑时也能完整可用时，它同样不是好选择。
它和普通提示词相比有什么区别？
普通提示词可能只描述视觉目标，却遗漏了让 ScrollTrigger 稳定工作的实现细节。gsap-scrolltrigger skill 更适合你需要明确的滚动行为、更清晰的术语，以及更少关于效果如何接线的猜测时使用。
它适用于 React、Vue 还是纯 JavaScript？
可以，但集成细节不同。这个技能最强的前提，是你已经知道目标技术栈，并能告诉模型应该输出纯 JS、基于组件的代码，还是框架安全的生命周期处理。
如何优化 gsap-scrolltrigger 技能
明确滚动契约
最大的质量提升来自定义清楚滚动契约：什么开始动画、什么结束动画、是否要 scrub、是否要 pin。不要只说“做一个酷的视差区块”，而要说“让该区块固定一个视口高度，图片随滚动向上 scrub，且在图片越过中心后再让说明文字淡入”。
先说明版式约束
提前提到 sticky header、动态内容高度、移动端断点，以及这个区块是否必须避免布局跳动。这些信息对 gsap-scrolltrigger 指南输出的影响，往往比视觉风格更大，因为 ScrollTrigger 的行为取决于真实页面几何结构。
要求能减少返工的实现细节
在合适的地方，要求代码包含清理逻辑、刷新时机和 reduced-motion 处理。常见失败模式包括：触发元素选错、在小内容块上过度使用 scrub、或者忘记 pin 会改变文档流。输入越强，这些错误越少，第一次输出也越接近可交付状态。
用真实内容样本迭代
第一次生成后，补充真实的区块名称、文案长度和图片尺寸，这样动画才能按内容微调。用于 Frontend Development 的 gsap-scrolltrigger 最有价值的输出，通常都需要在真实标记上再修订一次，因为触发时机和 pin 持续时间取决于最终 DOM，而不只是想法本身。