GSAP 官方发布了一个开源项目——gsap-skills，专门为 Cursor、Claude Code、Copilot 等 AI 编程工具设计。装上以后，AI 会开始真正理解 GSAP 动画开发，包括 Timeline 时间轴、ScrollTrigger、React/Vue 生命周期、动画性能优化和页面级动画编排。
项目地址：https://github.com/greensock/gsap-skills
为什么动画一直是前端最难啃的一块？
普通业务开发，大部分前端都能应对：接口、组件、状态管理、表单、列表，这些东西再复杂，至少还有明确的逻辑。但动画不一样。
尤其是官网类需求。很多前端都经历过这种场景：UI 甩过来一个设计稿，里面全是丝滑滚动、分镜动画、视差效果、卡片联动、页面转场、长页面叙事动画。然后前端盯着设计稿看了十分钟，最后默默删掉一半动画。
因为这种东西，很多时候已经不是"写页面"了，而是动画工程。
普通 CSS transition 能解决的问题非常有限：transition: all .3s 做按钮 Hover、淡入淡出、小范围切换还行。但你很难靠它做出 Apple 官网那种滚动推进、动态时间轴、多元素协同动画、长页面叙事、视频感转场等高级效果。
GSAP 到底强在哪？
GSAP（GreenSock Animation Platform）在前端圈已经很多年了，一直都是动画领域里的顶级选手。很多海外高级官网背后都大量使用了 GSAP。
它最核心的能力就两个字：控制。
普通动画开发，经常是这里 transition 一下，那里 keyframes 一下，整个动画逻辑非常碎。但 GSAP 里面有个特别核心的概念：Timeline（时间轴）。
你可以像拍电影一样去编排动画：
const tl = gsap.timeline();
tl.to(".title", {
y: 0,
opacity: 1
});
tl.to(".card", {
scale: 1,
stagger: 0.1
});
tl.to(".bg", {
opacity: 1
});谁先出现，谁后出现，间隔多久，什么时候开始，全都能精细控制。很多人第一次真正理解 GSAP 的时候，会突然意识到：高级动画和普通动画之间，差的根本不是"会不会动"，而是动画节奏。
真正让 GSAP 封神的：ScrollTrigger
ScrollTrigger 这个插件几乎重新定义了现代网页滚动动画。现在很多海外官网已经越来越不像传统网页了，更像一种"可交互电影"。
你往下滚动，页面开始推进，元素开始固定，动画开始联动，整个网站像镜头一样往前走。这种效果背后，大概率都是 GSAP + ScrollTrigger。
但问题也很明显：这玩意真的难。很多前端第一次写的时候，基本都会被 trigger、scrub、pin、start/end、refresh、cleanup、生命周期这些东西折磨到怀疑人生。
更头疼的是，不同框架处理方式还不一样：
- React 要处理 cleanup
- Vue 要正确解绑
- Next.js 要考虑 SSR
- Nuxt 要考虑客户端挂载时机
所以过去很长时间，AI 写 GSAP 经常属于"看起来没问题，运行直接翻车"。
GSAP 官方，现在开始亲自训练 AI 了
gsap-skills 本质上是一套官方 AI 动画知识库。GSAP 官方把 API 正确用法、Timeline 编排、ScrollTrigger、React/Vue 集成、性能优化、动画最佳实践全部做成了 AI Skill。
以前 AI 学动画，主要靠互联网各种教程乱学，所以经常 API 写错、生命周期混乱、性能一塌糊涂、动画逻辑很怪。现在不一样了，AI 学的是 GSAP 官方自己的规范。
AI 开始懂"动画工程"了
以前跟 AI 说"做一个 Apple 风格滚动官网"，很多 AI 给你的东西本质还是 transition: all .3s 这种"能动"的代码。现在，它开始真正生成 gsap.timeline()、ScrollTrigger、生命周期 cleanup、动画编排、性能优化这些真正能上线的东西。
AI 现在开始懂性能了
以前很多 AI 特别喜欢生成 top、left、width、height 这种动画，问题是这些属性特别容易触发重排，页面一卡一卡的。现在官方 Skill 会明确告诉 AI 优先使用 transform、opacity，以及 will-change、quickTo、stagger、kill、refresh 这些细节。
React/Vue 生命周期管理
以前 AI 写 GSAP + React 属于事故高发区。最经典的就是在 useEffect 里直接调用 gsap.to()，然后动画不销毁、ScrollTrigger 不 cleanup、页面越来越卡、DOM 污染。
现在官方 Skill 会优先让 AI 使用 useGSAP() 以及 gsap.context() 自动处理生命周期。这一点非常关键，因为 GSAP 在 React 里最麻烦的，一直都不是"动画怎么写"，而是"动画什么时候创建、什么时候销毁"。
Vue 也是同一个道理。很多人在 Vue 里写 GSAP，也经常会出现组件切换后动画还在、路由离开后 ScrollTrigger 没释放、keep-alive 页面越来越卡、DOM 引用错乱等问题。
gsap-skills 很重要的一点，就是它开始让 AI 理解不同框架下动画生命周期应该怎么管理。因为很多动画 Demo 看起来能跑，但真正上线后，连续切换几次页面，性能就开始雪崩。
如何快速使用？
非常简单，直接安装：
npx skills add https://github.com/greensock/gsap-skills如果你是指定 AI 工具：
npx skills add https://github.com/greensock/gsap-skills --agent antigravity安装以后，AI 就会自动学习 GSAP API、Timeline、ScrollTrigger、React/Vue 用法、动画性能优化等。
总结
gsap-skills 非常推荐前端开发者试用，尤其是经常写官网、做营销页、使用 Cursor 或 Claude Code、想提升动画能力的人，体验会非常明显。
- gsap-skills 地址：https://github.com/greensock/gsap-skills
- 更多案例：https://gsap.com/showcase/