最近，GSAP 官方干了一件很离谱的事情。

他们直接做了一个：gsap-skills！

项目地址：https://github.com/greensock/gsap-skills

简单来说，这东西是专门给 Cursor、Claude Code、Copilot 这些 AI 编程工具用的。装上以后，AI 会开始真正理解 GSAP 动画开发，包括：

• Timeline 时间轴

• ScrollTrigger

• React / Vue 生命周期

• 动画性能优化

• 页面级动画编排

甚至很多以前 AI 最容易翻车的地方，现在也开始能正确处理了。

说实话，我看到这个项目的时候，第一反应特别直接：

前端动画开发，可能真的要变天了。

为什么动画一直是前端最难啃的一块？

普通业务开发，大部分前端都还能顶住：接口、组件、状态管理、表单、列表`，这些东西再复杂，至少还有明确逻辑。但动画不一样。

尤其是官网类需求。

很多前端应该都经历过这种场景：

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

这个插件几乎重新定义了现代网页滚动动画。

现在很多海外官网，已经越来越不像传统网页了，更像一种：“可交互电影”。

你往下滚动，页面开始推进，元素开始固定，动画开始联动。

整个网站像镜头一样往前走。

这种效果背后，大概率都是：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 特别喜欢生成：

topleftwidthheight

这种动画。

问题是这些属性特别容易触发重排，页面一卡一卡的。

现在官方 Skill 会明确告诉 AI：

优先使用：

transformopacity

包括：

• will-change

• quickTo

• stagger

• kill

• refresh

这些细节。

现在 AI 也开始会用了。

这其实特别夸张。

因为 AI 已经开始从：

“让代码跑起来”

慢慢变成：

“让代码真正能上线”

React 用户应该最有感，Vue 其实也是同一个问题

以前 AI 写：

GSAP + React

属于事故高发区。

最经典的：

useEffect(() => {  gsap.to(...)}, [])

然后：

• 动画不销毁

• ScrollTrigger 不 cleanup

• 页面越来越卡

• DOM 污染

很多人查半天都不知道问题在哪。

因为 GSAP 这种动画库，本身就会操作真实 DOM，如果生命周期处理不好，页面跑久了以后问题会越来越明显。

现在官方 Skill 会优先让 AI 使用：

useGSAP()

以及：

gsap.context()

自动处理生命周期。

这一点非常关键。

因为：GSAP 在 React 里最麻烦的，一直都不是“动画怎么写”。

而是：动画什么时候创建、什么时候销毁。

其实 Vue 也是同一个道理。

很多人以前在 Vue 里写 GSAP，也经常会出现：

• 组件切换后动画还在

• 路由离开后 ScrollTrigger 没释放

• keep-alive 页面越来越卡

• DOM 引用错乱

尤其在：

• onMounted

• onUnmounted

• watch

• nextTick

这些生命周期配合动画的时候，非常容易埋坑。

所以现在 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/