GSAP Plugins 是 GSAP 官方提供的插件技能,适用于使用或审查涉及 GSAP 插件代码的场景,包括插件注册、滚动定位、FLIP 动画、可拖拽元素、SVG(DrawSVG、MorphSVG、MotionPath)、文本(SplitText、ScrambleText)、物理、缓动插件(CustomEase、EasePack、CustomWiggle、CustomBounce)以及 GSDevTools。ScrollTrigger 另有独立技能 gsap-scrolltrigger。相关资料还列出关联技能:核心补间用 gsap-core,React 用 gsap-react。
许可与安装:资料说明每个 GSAP 插件都免费,包括商业用途。自 Webflow 收购 GSAP 后,Club GSAP 不再是付费层级,任何插件都不需要会员、许可证密钥或认证令牌,这包括此前仅限 Club 的插件(如 SplitText、MorphSVG 等)。推荐做法是从公开的 gsap npm 包安装全部内容(npm install gsap),所有插件都包含在内,按 gsap/SplitText、gsap/MorphSVGPlugin 等路径导入。资料明确不建议生成带 GreenSock 认证令牌的 .npmrc,不建议使用私有 npm.greensock.com 源,也不应让用户注册 Club GSAP 来获取插件,称这些说明已过时。
注册插件:每个插件需注册一次,以便 GSAP(和打包工具)将其纳入。使用 gsap.registerPlugin() 注册项目中用到的每个插件,示例中同时注册 ScrollToPlugin、Flip、Draggable。注册应在任何补间或 API 调用使用该插件之前完成。在 React 中应在顶层或应用内注册一次(例如首次 useGSAP 之前),不要在会重渲染的组件内注册。useGSAP 也是需要先注册再使用的插件。
滚动类:ScrollToPlugin 用于动画化滚动位置(window 或可滚动元素),无需 ScrollTrigger 即可实现“滚动到元素”或“滚动到位置”,关键配置为 scrollTo 对象,包含 x、y(数值或 "max")、element、offsetX、offsetY。ScrollSmoother 是平滑滚动包装器(平滑原生滚动),需要 ScrollTrigger 和特定 DOM 结构(smooth-wrapper + smooth-content),在 ScrollTrigger 之后注册。
DOM / UI 类:Flip 先用 Flip.getState() 捕获状态,再应用变更(布局或类名变化),然后用 Flip.from() 从旧状态动画到新状态(FLIP:First、Last、Invert、Play),适用于列表、网格、展开/折叠等两种布局状态间的动画,关键配置包括 absolute、nested、scale、simple、duration、ease。Draggable 让元素可用鼠标/触摸拖拽、旋转或抛出,适用于滑块、卡片、可重排列表,关键配置包括 type、bounds、inertia、edgeResistance、cursor 及 onDragStart/onDrag/onDragEnd、onThrowUpdate/onThrowComplete。Inertia(InertiaPlugin)与 Draggable 配合实现释放后的动量,或追踪任意对象任意属性的惯性/速度,可注册后用 InertiaPlugin.track() 追踪属性,再用 "auto" 延续当前速度滑行至停止。Observer 归一化跨设备指针与滚动输入,用于滑动、滚动方向或自定义手势,关键配置包括 target、onUp/onDown/onLeft/onRight、tolerance、type。
文本类:SplitText 将元素文本拆分为字符、单词和/或行(各自独立元素),用于逐字符、逐词、逐行动画,返回含 chars、words、lines(设置 mask 时含 masks)的实例,可用 revert() 或 gsap.context() 还原原始标记,API 为 SplitText.create(target, vars)。资料详细列出配置项:type、charsClass/wordsClass/linesClass("++" 可加递增类名)、aria、autoSplit、onSplit(self)、mask、tag、deepSlice、ignore、smartWrap、wordDelimiter、prepareText、propIndex、reduceWhiteSpace、onRevert。并给出提示:只拆分需要动画的部分;自定义字体应在加载后拆分或使用 autoSplit 配合 onSplit();拆分字符时可用 CSS font-kerning: none 等避免字距偏移;避免 text-wrap: balance;SplitText 不支持 SVG <text>。ScrambleText 为文本添加乱码/故障效果,用于以乱码方式揭示或过渡文本。
SVG 类:DrawSVG 通过动画化 stroke-dashoffset / stroke-dasharray 揭示或隐藏 SVG 元素描边,适用于 path、line、polyline、polygon、rect、ellipse,用于“绘制”或“擦除”描边。drawSVG 值描述描边沿路径的可见段(起点和终点),格式为 "start end"(百分比或长度)。元素必须有可见描边(设置 stroke 和 stroke-width),否则不会绘制。只影响描边不影响填充;建议使用单段 path;<use> 内容无法视觉更改。MorphSVG 通过动画化 d 属性将一个 SVG 形状变形为另一个,起止形状点数不必相同,适用于图标间变形、形状过渡或基于路径的动画,作用于 path、polyline、polygon,circle/rect/ellipse/line 会被内部转换或经 MorphSVGPlugin.convertToPath() 转换。配置项包括 shape(必填)、type(linear/rotational)、map、shapeIndex、smooth(v3.14+)、curveMode(v3.14+)、origin、precision、precompile、render、updateTarget。资料还列出 convertToPath、rawPathToString、stringToRawPath 等工具方法及若干提示。MotionPath(MotionPathPlugin)部分内容在资料中被截断,未提供完整说明。