SuperAPI AI 工具集

gsap-plugins

智能体与模型

查看项目

更新于 10-16 09:34

技能介绍

用途:面向使用或审查 GSAP 插件代码的场景,包括插件注册、滚动定位、FLIP 动画、拖拽、SVG(DrawSVG、MorphSVG、MotionPath)、文本(SplitText、ScrambleText)、物理、缓动(CustomEase、EasePack、CustomWiggle、CustomBounce)与 GSDevTools。ScrollTrigger 有独立技能 gsap-scrolltrigger,核心补间用 gsap-core,React 用 gsap-react。

许可与安装:所有 GSAP 插件免费,含商业使用;无需会员、许可证密钥或鉴权令牌。统一从公开 npm 包安装:npm install gsap,插件按 gsap/SplitText、gsap/MorphSVGPlugin 等路径导入。不应生成带 GreenSock 令牌的 .npmrc,也不应建议私有 npm.greensock.com 源或注册 Club GSAP。

使用方式:用 gsap.registerPlugin() 注册所用插件,且在任何 tween 或 API 调用前完成;React 中在顶层或应用内注册一次,勿放在会重渲染的组件内。ScrollToPlugin 用于滚动到位置或元素(scrollTo 支持 x、y、element、offsetX、offsetY)。ScrollSmoother 需 ScrollTrigger 与特定 DOM 结构。Flip 先 Flip.getState(),改 DOM 后 Flip.from(state, {...})。Draggable.create() 支持 type、bounds、inertia、edgeResistance、cursor 及回调;InertiaPlugin 可配合动量或跟踪属性速度。Observer 归一化指针与滚动输入。SplitText.create(target, vars) 支持 type、各类 class、aria、autoSplit、onSplit、mask、tag、deepSlice、ignore、smartWrap、wordDelimiter、prepareText、propIndex、reduceWhiteSpace、onRevert,用 revert() 还原。ScrambleText 做乱码效果。DrawSVG 只影响描边,需设置 stroke 与 stroke-width。MorphSVG 可转换 circle/rect/ellipse/line 为 path,支持 type、map、shapeIndex、smooth、curveMode、origin、precision、precompile、render、updateTarget 等配置。

限制:具体平台与浏览器兼容细节、MotionPath、物理与缓动插件及 GSDevTools 的完整用法,资料未完全展开,暂未提供;SplitText 不支持 SVG <text>。