gsap-skills给你的 AI 编程助手装上 GSAP 官方驾照一句话核心结论AI 写的 GSAP 代码经常是错的——GreenSock 官方出手了。gsap-skills 是一套官方技能文件装到 Claude Code / Cursor 里AI 生成的动画代码正确率从猜的变成可靠的。一、What — gsap-skills 是什么1.1 一句话定义gsap-skills是 GreenSock 官方维护的一套AI Agent 技能文件。它不是 GSAP 库本身而是教 AI 编程助手如何正确使用 GSAP的结构化指南。gsap-skills ≠ GSAP 动画库 gsap-skills AI 的GSAP 使用说明书1.2 解决的问题你用 Claude Code 或 Cursor 写 GSAP 动画时有没有遇到过❌ gsap.to(.box, { left: 100 }) // AI 用了 left 而不是 x性能差 ❌ 忘记 registerPlugin(ScrollTrigger) // AI 不知道要先注册 ❌ new TimelineMax() // AI 用了 GSAP v2 的旧 API ❌ 在 React useEffect 里创建动画但不清理 // 内存泄漏 ❌ 把 Flip.getState() 和 gsap.to() 的顺序写反AI 模型的训练数据里 GSAP 的版本是混乱的——v2、v3、付费版、免费版混在一起。gsap-skills 给 AI 装了最新版官方指南。1.3 包含的 8 个技能技能文件覆盖内容gsap-core核心 APIto()/from()/fromTo()、缓动、stagger、transform 别名gsap-timeline时间线编排位置参数、标签、嵌套、播放控制gsap-scrolltrigger滚动驱动动画start/end、scrub、pin、refresh、清理gsap-plugins插件全家桶ScrollTo、Flip、Draggable、SplitText、ScrambleText、DrawSVG、MorphSVG 等gsap-utils工具函数clamp、mapRange、random、snap、toArray、interpolate等gsap-reactReact 最佳实践useGSAPhook、gsap.context()、ref 模式、SSRgsap-frameworksVue / Svelte 等框架的生命周期和选择器作用域gsap-performance性能指南transform vs layout、will-change、批量更新、ScrollTrigger 优化1.4 类比锚点类比说明TypeScript 类型定义.d.ts让 IDE 知道 API → gsap-skills 让 AI Agent 知道正确用法ESLint 规则ESLint 告诉你不该写什么 → gsap-skills 告诉你该写什么官方 SDK 文档给人看的文档 → gsap-skills 是给 AI 看的文档驾照考试没驾照也能开车但容易出事 → 有 gsap-skills 的 AI 像持证上路二、Why — 为什么需要 gsap-skills2.1 背景GSAP 已全面免费Webflow 收购 GreenSock 后所有插件全部免费——SplitText、MorphSVG、DrawSVG、Flip、ScrollSmoother 这些曾经收费的插件现在都从gsapnpm 包直接安装无需会员、无需 token、商业可用。这意味着更多开发者会开始用 GSAP更多 AI Agent 会遇到 GSAP 相关问题——gsap-skills 的重要性也水涨船高。2.2 痛点不用 gsap-skills 时用了 gsap-skills 时AI 凭记忆写代码经常用 v2 旧 APIAI 按官方指南生成 v3 最新 API忘记registerPlugin()始终先注册再使用React 里不清理动画 → 内存泄漏自动用gsap.context()包裹并清理Transform 用left/top而不是x/y始终用高性能 transform 别名ScrollTrigger 忘记refresh()知道什么时候该 refreshAI 幻觉出不存在的方法名方法名和 API 签名 100% 准确2.3 设计哲学gsap-skills 的设计原则很聪明不是 README是指令集——每个 skill 文件告诉 AI “遇到什么场景该怎么做”不是罗列 API声明不要做什么比要做什么更重要——DONT use left for positional animations这类禁止规则是 AI 最需要的代码示例优先——每个规则都配有正确/错误对比示例框架感知——React 有专门的useGSAPhook 指导不跟 Vue 混在一起三、How — 怎么用3.1 安装30 秒# 方式一CLI 自动检测你的 Agent推荐npx skillsaddhttps://github.com/greensock/gsap-skills# 方式二Claude Code 插件市场/plugin marketplaceaddgreensock/gsap-skills# 方式三手动复制gitclone https://github.com/greensock/gsap-skills.gitcp-rgsap-skills/skills/ ~/.claude/skills/3.2 安装后 AI 行为变化不用 skills你问 AI“帮我做一个卡片列表滚入时逐个淡入上移”AI 可能输出// ❌ 没有注册插件、用了 left、没有清理gsap.to(.card,{left:0,opacity:1,duration:0.5,delay:0.1})用了 skillsAI 输出import{gsap}fromgsapimport{ScrollTrigger}fromgsap/ScrollTriggergsap.registerPlugin(ScrollTrigger)// ✅ 先注册// ✅ 用 x 而不是 left触发 composite 层不重排// ✅ 用 autoAlpha 而不是 opacity自动处理 visibility// ✅ stagger 替代手动 delay 循环// ✅ scrollTrigger 集成gsap.from(.card,{x:60,autoAlpha:0,duration:0.5,stagger:0.1,scrollTrigger:{trigger:.card-list,start:top 80%,toggleActions:play none none reverse,},})3.3 实战用 AI gsap-skills 做一个产品特性展示页你跟 AI 说“做一个三列的特性卡片区滚入时卡片从下方依次淡入带弹性效果。用 React GSAP。不要用 CSS animation。”安装 gsap-skills 后的 AI 会输出import { useRef } from react import { gsap } from gsap import { ScrollTrigger } from gsap/ScrollTrigger import { useGSAP } from gsap/react gsap.registerPlugin(ScrollTrigger, useGSAP) const features [ { title: 实时操控, desc: 10ms 响应延迟 }, { title: 5G 远程, desc: 跨省操控无压力 }, { title: AI 识别, desc: YOLO 实时检测 }, ] export function FeatureCards() { const containerRef useRef(null) useGSAP(() { gsap.from(.feature-card, { y: 80, autoAlpha: 0, duration: 0.6, stagger: 0.12, ease: back.out(1.7), scrollTrigger: { trigger: containerRef.current, start: top 75%, toggleActions: play none none none, }, }) }, { scope: containerRef }) return ( div ref{containerRef} classNamegrid grid-cols-3 gap-6 {features.map((f) ( div key{f.title} classNamefeature-card rounded-xl bg-white p-6 shadow-lg h3 classNametext-xl font-bold{f.title}/h3 p classNametext-gray-500{f.desc}/p /div ))} /div ) }3.4 常用的 ask AI 方式你想做的怎么跟 AI 说元素淡入“用 GSAP from 做入场动画autoAlpha y”多步骤编排“用 timelineB 在 A 结束前 0.2s 开始”滚动触发“加 ScrollTrigger元素进入视口时触发”列表交错“用 stagger间隔 0.1s”SVG 路径动画“用 DrawSVG 插件画路径”页面切换过渡“用 Flip 插件做 layout transition”React 中使用“用 useGSAP hook不是 useEffect”四、When / Which — 什么场景用它跟什么对比4.1 场景矩阵场景不加 gsap-skills加 gsap-skills简单gsap.to()⚠️ 可能用错 transform 属性✅ 自动用x/y/autoAlphatimeline 编排⚠️ 可能不知道位置参数✅ 知道所有位置参数语法ScrollTrigger❌ 很大概率忘记registerPlugin、refresh✅ 完整的注册配置清理React 项目❌ useEffect 里写动画但不清理✅useGSAPgsap.context()复杂插件Flip、DrawSVG❌ API 用法高度不确定✅ 标准范例 禁止事项性能敏感场景❌ 用width/left触发重排✅ 只用 transform opacity4.2 同类对比方案是什么和 gsap-skills 的区别GSAP 官方文档给人看的 API 文档给 AI 看的指令带禁止规则GSAP Cheatsheet速查表skills 是行为和场景导向type definitionstypes/gsap类型只告诉参数叫什么不告诉为什么不能那样做Cursor Rules用户自定义规则gsap-skills 是官方维护的持续更新.cursorrules文件通用项目规则专注于 GSAP 这一个领域更精确4.3 要不要装你的情况建议偶尔写几个简单 GSAP 动画⚠️ 不用也行但装了更省心项目中大量使用 GSAP✅ 必装正确率提升显著用 React GSAP✅ 必须装useGSAP模式一般人不知道用 ScrollTrigger 做复杂交互动效✅ 必须装API 细节太多团队多人协作写动画✅ 装到项目级 skill保证产出一致性五、Where — 后续怎么学5.1 进阶路线第 1 步 安装 gsap-skills → 用 AI 写几个基础动画试试效果 第 2 步 对比 AI 生成代码和官方文档 → 理解 AI 为什么那样写 第 3 步 学 timeline ScrollTrigger → 让 AI 做复杂编排 第 4 步 在 React 项目中正确使用 → useGSAP context 第 5 步 探索插件Flip、DrawSVG、SplitText → 打开新世界 第 6 步 看 AI 的禁止规则列表 → 反向理解性能陷阱5.2 资源推荐资源链接说明gsap-skills 仓库github.com/greensock/gsap-skills官方仓库star 9KGSAP 官方文档gsap.com/docs每个 API 有 CodePen 示例GSAP 官方论坛gsap.com/community问题 24h 内必回GSAP React 指南gsap-skills 中的 gsap-react skillReact 最佳实践Codrops GSAP 教程tympanus.net/codrops高质量实战项目5.3 一句话收尾GSAP v3 全部免费了gsap-skills 让 AI 帮你写对的代码。装一个 skill 文件AI 的 GSAP 编码水平从猜变成确定性。
)
