GSAP Skills
从时序到清理，让网页动效经得起反复使用
GreenSock 官方八项 Skill，帮助助手编写时间轴、滚动叙事、文字动效和可维护的框架集成。
使用入口
- 兼容 Agent Skills 的编程助手
- Claude Code / Cursor 插件入口
- Copilot 仓库指令适配
- GitHub Star
- 17,500
- 版本
- 1.0.0
- 资料核对
从一个组件的完整生命周期开始。
先确定进入、交互、尺寸变化与离开时的行为，再选择所需 Skill。把手机阅读和减少动态效果一起完成，之后再扩展复杂滚动与插件。
选一个任务，开始使用
在目标项目中安装 Skill，让助手确认可发现的 gsap-* 指导，再检查项目依赖。下方任务包含从输入、实现到浏览器核验的完整路径。
把标题、图片和行动按钮编排成一条时间轴，同时处理组件复用与卸载。
安装官方 GSAP 指导
在终端执行作者提供的命令，需要先安装 Node.js。按安装工具提示选择客户端与所需技能。
查看作者安装说明npx skills add https://github.com/greensock/gsap-skills确认运行库，再进入第一个组件
普通网页需要 gsap；React hook 另外需要 @gsap/react。作者 React 参考项目声明 gsap ^3.15.0、@gsap/react ^2.1.2，属于示例依赖范围，不是对现有项目的强制升级。
查看 React 示例依赖把这段话发给 AI
以下是本站根据官方资料编写的任务，不是已经运行完成的案例。方括号内容由你提供；交付时必须区分实际检查和待测项目。
请使用 gsap-core、gsap-timeline 和 gsap-react，修改 [React/Next.js 项目路径] 中的 [首屏组件路径]。材料是 [标题、图片、按钮和目标效果]。先读 package.json、现有组件与路由，确认当前框架、包管理器、GSAP 和 @gsap/react 版本；保留现有锁文件体系。缺少依赖时说明项目内需安装什么；作者示例用 npm install gsap 和 npm install @gsap/react，不要把安装 Skill 当成已经安装了运行库。 只改这个组件及必要样式。用容器 ref 限定选择器，注册 useGSAP，在客户端生命周期中建立一条带 labels/defaults 的 timeline。先给出标题、图片、按钮的开始时间与持续时间，再实现适度的 transform/opacity 动效；不用多个 delay 拼顺序。Next.js 按项目当前客户端组件边界实现，不在服务器渲染中访问 DOM。 使用 gsap.matchMedia 处理 prefers-reduced-motion：选择减少动态效果时直接显示完整内容。正文和按钮在脚本未运行时也应可见、可操作。重复点击播放时复用或重启同一条时间轴，不无限创建实例。若依赖改变需要重建，明确 dependencies 与 revertOnUpdate；延迟创建动画的回调用 contextSafe 纳入管理，另行移除原生监听、清除计时器并取消已不需要的异步后续，不能把 contextSafe 当成取消机制。 检查同一页面两个组件实例互不干扰、开发模式重复挂载、离开再返回三次、重复点击、窄屏、键盘操作和减少动态效果。交付修改文件、实际运行命令、时序说明及逐项检查结果；没有运行的项目写明未测。
检查你拿到的结果
- 具有明确时序和组件范围的首屏动画代码。
- 包含重复挂载、回访、窄屏及减少动态效果的实际检查记录。
进一步了解这个 Skill
GSAP Skills 是 GreenSock 官方维护的八个编程指导 Skill。它把补间、时间轴、滚动驱动、插件、工具函数、React、其他框架与性能拆开，让助手围绕当前任务读取相关规则。它不负责替你选视觉风格，也不会仅凭安装就让现有页面产生动画。
它最有价值的地方是把“动起来”之后的问题一起纳入：多个元素怎样按一条时间轴协作，两个组件实例怎样互不干扰，页面离开时如何恢复样式，字体和图片晚到之后如何重算滚动位置。React 有 useGSAP 路径；Vue、Nuxt 与 Svelte 则按各自生命周期组织上下文与清理。
仓库附有原生 JavaScript、React、Vue 和 Nuxt 参考示例。先从项目里一个真实组件开始，再用重复进入、缩放和减少动态效果检查，通常比整站同时加动效更容易定位问题。示例只是起点，依赖版本、类型检查和浏览器行为仍要在你的项目中确认。
来源与核验
资料核对
已阅读八份 Skill、安装说明及相关示例，并核对 @gsap/react 实现与 GSAP 官方许可；未安装第三方依赖或实际运行这些动画任务。