技能包

gsap-skills:教助手按官方方式写 GSAP 动画

适合要让助手正确使用 GSAP 核心 API、时间线或 ScrollTrigger 的人,前提是用官方 npx 命令安装技能,并用公开 gsap 包安装动画库。

官方来源 · gsap-skills

安装

npx skills add https://github.com/greensock/gsap-skills

适合谁

适合要让编程助手按官方方式使用 GSAP(GreenSock Animation Platform)的人。官方写明:这些是 GSAP 的正式 AI 技能,用来教助手正确用法,覆盖核心 API、时间线、ScrollTrigger、插件,以及 React、Vue、Svelte、原生 JS 和性能。

更合适的人,是已经在写动画、准备检查 gsap.to() / from() / fromTo()、时间线编排,或滚动触发是否写对的人。不适合把这套技能当成 GSAP 运行时本身:动画库要从公开的 gsap npm 包安装。官方写明 GSAP 百分之百免费,包含全部插件;Webflow 收购后,从前的 Club 插件(如 SplitText、MorphSVG)也对所有人免费,包括商用。不需要 Club 会员、.npmrc、鉴权令牌或私有仓库。

开始前要能在本机运行 npx skills add。不要把这条命令改写成未给出的其他安装器。

3 分钟完成第一次尝试

只走仓库给出的这一条安装命令。先完成技能安装,再让助手做一次只读核对,先不要改项目文件。

前置条件:当前环境能运行 npm/npx,并且你的助手能加载新安装的技能。第一次不要写入动画代码,也不要连接未说明的私有源。

安装位置:在项目或工作区按官方命令添加技能。

npx skills add https://github.com/greensock/gsap-skills 

官方仓库:

https://github.com/greensock/gsap-skills

GSAP 产品页:

https://gsap.com/

低风险触发:安装后,让助手只检查一段已有的 gsap.to() 是否用了官方核心 API 里提到的缓动、时长、stagger 或 defaults。不要先让它改文件。若下一步要写入时间线或 ScrollTrigger 代码,先确认将改哪些文件,再执行。

成功信号:助手能按 gsap-core 的口径讨论 gsap.to() / from() / fromTo(),而不是编造未列出的技能名。哪些助手能用这条 CLI,官方指向:

https://github.com/vercel-labs/skills#supported-agents

不要从一份名单推断“只有这些助手能用”。

使用案例

案例一:核对本机核心动画写法。用 gsap-core:核心 API 包括 gsap.to() / from() / fromTo(),以及 easing、duration、stagger、defaults。适合已经有一段补间、想核对参数有没有写偏的人。证据只到这些主题,没有给出完整函数清单。先做只读检查;若要改代码,先确认副作用。

案例二:核对本机滚动动画。用 gsap-scrolltrigger:覆盖滚动联动、pinning、scrub、triggers,以及 refresh 与 cleanup。适合页面里已经有滚动触发、想核对有没有漏掉刷新或清理的人。同样先检查,再决定是否改文件。时间线技能 gsap-timeline 在原文里单独成行(sequencing、position parameter、labels、nesting、playback),不要把它和 ScrollTrigger 混成一个技能。

使用边界

安装技能用 npx skills add https://github.com/greensock/gsap-skills 。安装 GSAP 库用公开 gsap npm 包。两者不要当成同一步。

原文点名的技能行只有 gsap-core、gsap-timeline、gsap-scrolltrigger。其他技能名不要自行补全。

GSAP 与从前的 Club 插件现已免费,包括商用;收购说明见:

https://gsap.com/blog/webflow-GSAP/

不要再按需要鉴权或私有源的方式安装。官方没有把适用语言写成互斥范围,也没有要求必须同时使用 React、Vue 或 Svelte。