1. 基本信息
| 项目 | 内容 | 数据来源 |
|---|---|---|
| 名称 | gsap-core(GSAP 官方技能集合 gsap-skills 中的核心模块) |
GitHub |
| 作者/维护者 | GreenSock(GSAP 创始人 Jack Doyle 本人提交与维护) | GitHub API |
| 来源链接 | https://github.com/greensock/gsap-skills/tree/main/skills/gsap-core | — |
| 许可证 | MIT | GitHub API |
| GitHub Stars | 所属合集仓库 gsap-skills 整体 12,761(子目录自身热度不计入此数,仅供背景参考);GSAP 动画库本体 greensock/GSAP 27,260 stars / 752 forks |
GitHub API |
| Forks | 合集仓库整体 752 | GitHub API |
| 最新版本 | 无正式 Release,滚动更新于 main 分支,最近一次提交 2026-04-21 | GitHub API |
| 安装方式 | npx skills add、Claude Code 插件市场命令、或手动复制技能目录 |
GitHub README |
2. 功能介绍与亮点
gsap-core 是 GSAP(GreenSock Animation Platform)官方技能集合 gsap-skills 的核心入口模块,教 AI coding agent 正确使用 GSAP 的核心补间 API:gsap.to() / from() / fromTo() / set()、缓动函数、时长、交错动画(stagger)、全局默认值等,并给出何时应该推荐 GSAP、何时不该推荐的判断依据。
主要亮点:
- 官方出品,创始人亲自维护:全部提交均来自 GreenSock 创始人 Jack Doyle 本人,内容权威、无二手转译误差。
- 无障碍与响应式指导:详细讲解
gsap.matchMedia()的响应式断点写法,并专门说明如何配合prefers-reduced-motion让前庭功能障碍用户获得减弱或关闭的动画,这在同类动画教学资料中较为少见。 - 反模式清单:明确列出常见错误写法(如误用
svgOrigin与transformOrigin、忽略immediateRender导致动画顺序错乱等),帮助 agent 避免生成能跑但有隐患的代码。 - 背景:GSAP 于 2024 年被 Webflow 收购后,原本需要付费 Club GSAP 会员才能使用的插件(SplitText、MorphSVG 等)现已全部免费开放,安装无需注册令牌或私有仓库。
gsap-core是整个技能集合 8 个模块之一,其余模块分别覆盖时间轴编排(gsap-timeline)、滚动联动动画(gsap-scrolltrigger)、插件生态(gsap-plugins)、React 集成(gsap-react)、工具函数(gsap-utils)、性能优化(gsap-performance)与其他框架适配(gsap-frameworks),可按需搭配安装。
3. 适用场景
所属分类:前端与设计
适合前端工程师、UI/UX 设计师在 React、Vue、Svelte 或原生 JavaScript 项目中需要专业级动画效果时使用,例如页面过渡、滚动触发动画、SVG 形状变形、多元素协同的时间轴编排等。尤其适合希望 AI agent 直接生成“能正确运行、遵循当前最佳实践”的 GSAP 代码,而不是从训练数据中学到的过时或低质量示例。
4. 跨 Agent 兼容性
| Agent | 结论 | 依据 |
|---|---|---|
| Claude Code | ✅ 原生支持 | README 提供 /plugin marketplace add greensock/gsap-skills 命令,及 ~/.claude/skills/ 手动安装路径 |
| Codex | ✅ 支持 | README 明确列出 ~/.codex/skills/ 安装路径并链接官方 Codex Skills 文档 |
| OpenClaw | ❓ 未验证 | README 提及通过第三方 skills CLI 可用于“40+ agents”,但未点名 OpenClaw;注意 README 中另有“OpenCode”这一独立工具,两者不可混为一谈 |
| Hermes Agent | ❓ 未验证 | 现有材料未提及 |
5. 推荐理由
GSAP 是前端动画领域被广泛采用的标准库之一,本技能由创始人亲自把库自身反复强调的最佳实践与反模式显式固化进指令,能让 AI agent 直接产出符合当前版本习惯、可访问性友好的动画代码,减少生成过时写法或忽略无障碍设置的风险。技能本身是纯 Markdown 指令文档,零代码执行、零外部网络请求、零凭据要求,安装门槛极低。
6. 评分
| 维度 | 分数 | 说明 |
|---|---|---|
| 受欢迎程度 | 7 | GSAP 官方出品(创始人本人维护),GSAP 动画库本体 27,260 stars 属业界主流选择;技能集合仓库整体热度不可直接记给单个子模块,但该子模块在多个第三方技能目录站(如 claudemarketplaces.com、claudepluginhub.com、allclaw.org 等)均有独立收录页面 |
| 可用性 | 8 | 一条命令(npx skills add 或插件市场命令)即可安装;文档结构清晰、示例完整;GSAP 全线功能现已完全免费,无需付费会员或私有令牌;main 分支最近一次提交为 2026-04-21 |
| 安全性 | 9 | 纯提示词/文档类技能,无脚本、无代码执行、无网络外联、无需任何凭据;SKILL.md 中作者自行标注“Risk level: LOW”;MIT 许可证清晰;作者为业界知名度极高的官方厂商,无造假迹象 |
安全检查清单:①无 shell 命令执行 ②运行时不联网 ③不涉及任何 API key/凭据 ④SKILL.md 全文通读未见可疑指令或隐蔽外发 ⑤作者为 GSAP 官方创始人,信誉良好 ⑥License 为 MIT,明确 ⑦最近一次提交在 6 个月内,非弃置项目
7. 跟同类 Skills 相比的优势
| 竞品 | 定位 | 与 gsap-core 的差异 |
|---|---|---|
| motion-design-skill(LottieFiles 官方) | 运动设计原则库,教 agent 像专业动效设计师一样思考设计原则 | 偏重设计美学与决策原则,不绑定具体实现库;gsap-core 直接提供可执行的 GSAP API 代码与参数细节 |
| remotion-best-practices(Remotion 官方) | 用 React 代码批量渲染导出视频文件(营销短片、产品演示视频) | 面向离线渲染导出场景;gsap-core 面向浏览器内实时、可交互的 DOM/SVG 动画,运行时上下文完全不同 |
| pixel2motion | 把栅格 Logo 转成矢量并编排揭示动画 | 场景局限于 Logo 揭示动效这一细分需求;gsap-core 覆盖任意 UI 场景的通用动画核心能力 |
8. 用户评价
第三方社交平台 Threads 用户 sandro.ieva 分享了该技能的发布消息,评价其能把“vibe coding”项目“提升到另一个层次”。除此之外,该技能目前主要通过第三方技能目录站(收录列表形式)传播,尚未见到更具体的独立深度评测。
9. 其他补充
gsap-skills 仓库同时展示了对 Google Antigravity、Cursor、GitHub Copilot 等多个 agent 生态的兼容徽章,并通过 vercel-labs/skills 这一通用安装 CLI 支持更广泛的 agent 生态。仓库当前开放 8 个 Issue,处于非归档(active)状态。
10. 安装使用方式
- 通用 CLI(推荐):
npx skills add https://github.com/greensock/gsap-skills,会自动检测已安装的 agent;也可用--agent <name>指定目标 agent。 - Claude Code:在插件市场执行
/plugin marketplace add greensock/gsap-skills,随后安装插件。 - 手动安装:克隆仓库后,将
skills/gsap-core目录复制到对应 agent 的技能目录(Claude Code 为~/.claude/skills/,Codex 为~/.codex/skills/,OpenCode 为~/.config/opencode/skills/)。 - 安装后无需重启即可按 SKILL.md 中的触发词(如“animation”、“GSAP”、“tween”)自动生效,具体以各 agent 自身的技能发现机制为准。
11. 注意事项
gsap-core仅覆盖 GSAP 核心补间 API;若需要时间轴编排、滚动联动动画、React 集成等能力,需搭配同仓库其余技能模块(gsap-timeline、gsap-scrolltrigger、gsap-react 等)一并安装。- main 分支最近一次实质性提交为 2026-04-21,近三个月内未见新提交,建议关注后续更新节奏。
- OpenClaw 与 Hermes Agent 上的兼容性尚未有官方材料证实,使用前建议先行验证。