1实现原理 · 为什么它能做到
先解决「许可证迷思」再讲 API：开篇一节专门纠正「Club GSAP 付费/需要 auth token/私有 registry」的过时信息，给出唯一正确安装路径。
skills/gsap-plugins/SKILL.md
Every GSAP plugin is **free**, including for commercial use.
注：为什么能实现宣称功能：模型知识里普遍残留「SplitText/MorphSVG 是 Club 付费插件、要 .npmrc token」的旧事实，若不显式纠偏，agent 会生成错误的安装步骤引导用户去买会员；这段是「事实纠错型」指令，作用类似补丁。
注册范式统一：所有插件一律 gsap.registerPlugin() 先注册再用，且注册点固定在应用级（不在会重渲染的组件里）。
skills/gsap-plugins/SKILL.md
Register each plugin once so GSAP (and bundlers) know to include it.
注：这里在做什么：注册同时承担「告诉打包器别 tree-shake 掉插件」的职责；skill 明确 useGSAP 本身也是需要注册的插件，避免 React 用户忘注册导致 hook 不生效。
按功能域分区成手册：Scroll / DOM-UI / Text / SVG / Easing / Physics / Development / Other，每插件配最小可用片段 + 关键配置表。
skills/gsap-plugins/SKILL.md
gsap.registerPlugin(ScrollToPlugin, Flip, Draggable);
注：一次注册多个插件的写法也在示例里，覆盖 ScrollToPlugin/Flip/Draggable 三件套的组合用法。
SplitText 的用法教到「生命周期绑定」层级：autoSplit + onSplit 返回值驱动自动回收与进度同步，而不只是「拆字然后 stagger」。
skills/gsap-plugins/SKILL.md
Animations must be created inside onSplit()
注：关键点：autoSplit 会在字体加载完成或宽度变化时重新拆分，旧动画必须能在重拆后被清理；因此动画要建在 onSplit 内并把 tween 返回给 SplitText。另附 aria / mask / smartWrap / wordDelimiter 等无障碍与多语言细节。
MorphSVG 从基础到调参全覆盖：shapeIndex 对齐、map 匹配策略、的 smooth/curveMode/precompile 性能旋钮、render 画到 canvas。
skills/gsap-plugins/SKILL.md
MorphSVGPlugin.convertToPath("circle, rect, ellipse, line");
注：像 precompile:"log" / shapeIndex:"log" 这种「先打印再回填」的技巧也被写下来，属于减少试错成本的实操知识。
划定开发期插件的红线：GSDevTools 与 markers 类调试件不得进生产。
skills/gsap-plugins/SKILL.md
❌ Ship GSDevTools or development-only plugins to production.
注：与 gsap-scrolltrigger 的 markers 要求互为呼应，形成仓库级一致的生产纪律。
隐含的插件组合依赖被显式写出：Draggable 的惯性抛掷必须同时注册 InertiaPlugin。
skills/gsap-plugins/SKILL.md
gsap.registerPlugin(Draggable, InertiaPlugin);
注：Draggable 的 inertia: true 依赖 InertiaPlugin 存在，否则静默失效；skill 用注册示例把这个隐含依赖显式化。
2核心能力
01插件注册与打包：registerPlugin 的使用时机与多插件一次注册
02ScrollToPlugin：滚动到位置/元素（x、y、element、offsetX/offsetY，含 "max"）
03ScrollSmoother：平滑滚动包裹层与必需的 DOM 结构
04Flip：getState → 改 DOM → from() 的 FLIP 动画（absolute/nested/scale/simple）
05Draggable + Inertia：拖拽/旋转/抛掷，含 bounds/edgeResistance/onThrowUpdate
06Observer：跨设备指针/滚轮手势归一（onUp/onDown/onLeft/onRight/tolerance/type）
07文本与 SVG：SplitText（chars/words/lines、autoSplit、mask、aria）、ScrambleText、DrawSVG、MorphSVG、MotionPath(+Helper)
08缓动与物理：CustomEase / EasePack / CustomWiggle / CustomBounce、Physics2D / PhysicsProps、PixiPlugin 集成
3外部依赖
| 类型 | 依赖 |
|---|---|
| package | gsap（公共 npm 包，全部插件内含） |
| package | gsap 插件子路径（ScrollToPlugin/Flip/Draggable/InertiaPlugin/SplitText/MorphSVGPlugin/Physics2DPlugin/PixiPlugin…） |
| package | PixiJS（PixiPlugin 动画的宿主渲染库，第三方） |
| network | Webflow 收购 GSAP 公告（插件免费的依据） |
| network | GSAP 插件总文档 / Flip / DrawSVG / MorphSVG / SplitText 分页 |
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- 「全部插件免费」是政策陈述，有时效性 — 结论基于 Webflow 收购后的官方政策（blog 链接）；若未来条款变化，商业使用者需以官方许可为准，不应把 skill 文本当法律依据。
- 插件组合易漏注册 — InertiaPlugin/useGSAP 等需显式注册，漏了会静默失效（动画不报错但行为缺失）；skill 已给出示例，但模型仍可能只 import 不 register。
- 部分插件改写页面结构 — ScrollSmoother 要求特定 wrapper DOM、Draggable 绑定指针事件、SplitText 会重写文本节点结构（可 revert）；对可访问性与 SEO 的影响需实测。
- 第三方渲染库风险外溢 — PixiPlugin 场景实际依赖 PixiJS 本体；该库版本与供应链风险不属本 skill 覆盖范围，需使用者自行评估。
风险提醒：绿色，放心使用。纯指令型 skill：目录内仅 SKILL.md（21,579 B），无脚本、无网络外发、无凭证读取、无文件写入；外链全为 gsap.com 官方页面。特别之处是它明确反对凭证类做法——正文禁止生成带 GreenSock auth token 的 .npmrc 或使用私有 registry，等于把「供应链/凭证泄露」这一常见风险源从源头掐掉（与旧教程相反）。注意点仅剩生成代码需自审与 PixiJS 等第三方库需用户自行引入。
5第二遍独立确认
- [ok] 目录资产面：仅 SKILL.md — skills/gsap-plugins/ 下唯一文件 SKILL.md（21,579 B）；无 scripts/、references/、二进制。
- [ok] external_deps 逐条核实 — npm 安装行、插件子路径 import、PIXI.Sprite 代码、以及 6 条 gsap.com URL（blog/webflow-GSAP、Plugins 总页、Flip、DrawSVGPlugin、MorphSVGPlugin、SplitText）全部逐字命中文件。
- [ok] 「无需 auth token / 私有 registry」是否为原文反例式约束 — 原文确为否定式告诫「❌ Do **not** generate an `.npmrc` with a GreenSock auth token, suggest the private `npm.greensock.com` registry…」——全仓 token 关键词命中处即此，非读取凭证。
- [ok] SplitText 的 onSplit/autoSplit 描述与 API 语义一致性 — 原文说明 autoSplit 在字体加载完成/宽度变化时重拆、动画须建于 onSplit 内并 return 以获得清理与进度同步，与官方 v3.13+ 行为一致；同时给出 aria/mask/smartWrap 等真实参数。
- [ok] MorphSVG 参数是否编造 — shapeIndex/map/smooth(v3.14+)/curveMode/origin/precision/precompile/render/updateTarget 与官方参数表一致；convertToPath/rawPathToString/stringToRawPath 静态方法真实存在。
- [ok] 安全反例搜索 — token 扫描：除上述否定式 auth token 一处外，curl/wget/fetch(/XMLHttpRequest/exec(/child_process/process.env/.env/API_KEY/secret 全零命中；无混淆/编码载荷。
- [ok] 与 gsap-scrolltrigger 的插件归属是否打架 — 本文首段声明「ScrollTrigger has its own skill (gsap-scrolltrigger)」，未重复其内容；ScrollSmoother 在此、ScrollTrigger 本体在彼，分工一致。
- [ok] 元数据与 pin — frontmatter license MIT；HEAD = aed9cfd3277740755f6bfc1155c7aa645403b760；GitHub API stars 15326 / pushed_at 2026-07-29T17:36:08Z。
6结论
适合：适合用 GSAP 做 SVG 形变（MorphSVG/DrawSVG）、文字动画（SplitText/ScrambleText）、拖拽与惯性（Draggable+Inertia）、布局过渡（Flip）、平滑滚动（ScrollSmoother）或滚动定位（ScrollToPlugin）的项目；也适合作为「别再买 Club 会员」的纠错参考给 agent。
不适合：不适合只需要基础 tween/timeline 的项目（用 gsap-core、gsap-timeline 即可，本文件体积最大）；不适合需要 ScrollTrigger 细节的场景（在 gsap-scrolltrigger）；不适合把 skill 文本当作商业授权法律依据的场景——许可条款应以官方页面为准。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 gsap-plugins.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agent188abaf4c67c55db…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② 上游 GitHub · 原始来源
来源信息 GitHub 原始
作者 / 仓库greensock / greensock/gsap-skills
原始 GitHubgreensock/gsap-skills ↗
Stars15326
最近推送2026-07-29
本 skill commit
aed9cfd327许可MIT（仓库根 LICENSE，Copyright (c) 2026 GreenSock；GitHub API spdx_id=MIT；每个 SKILL.md frontmatter 亦写 license: MIT）
本站信息
收录日期2026-09-06
分类设计
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。