以 skill 自身的术语
官方 GSAP skill，涵盖插件注册以及除 ScrollTrigger 之外的每个插件：ScrollTo、ScrollSmoother、Flip、Draggable、Inertia、Observer、SplitText、ScrambleText、DrawSVG、MorphSVG、MotionPath、CustomEase、EasePack、CustomWiggle、CustomBounce、Physics2D、PhysicsProps、PixiPlugin 和 GSDevTools。
内容先讲授权问题——每个插件都是免费的，不需要 Club GSAP 会员或 auth token——然后给出各插件的具体配置：Flip.from vars、Draggable options、SplitText.create vars、morphSVG options、motionPath alignment。面向从公开的 gsap npm 包安装所有内容、需要正确调用顺序、默认值和注意事项的设计师与开发者。相关 skill：gsap-core、gsap-scrolltrigger、gsap-react。
它产出什么
- 一种将窗口或任意可滚动元素动画滚动到某个位置或目标的 scroll tween。
- 一个 SplitText 实例，暴露 chars、words、lines，以及设置 mask 时的 masks。
- 一个转换后的 path 元素，替换 DOM 中原有的 circle、rect、ellipse 或 line。
工作方式
- 01提前一次性注册插件
每个插件只需注册一次，让 GSAP 和打包工具知道要引入它，且必须在任何 tween 或 API 调用使用它之前完成。
- 02用 Flip 捕获状态、改变、然后动画过渡
Flip 是一个三步流程：读取旧状态、变更 DOM，然后从记录的状态动画过渡到新状态。
- 03创建拖拽与抛掷交互
Draggable.create 接受 type、可选的 bounds 和 inertia；InertiaPlugin 在释放后提供动量。
- 04将文本拆分为可动画的单元
SplitText 将字符、单词和/或行分别放入各自的元素中，从而可以按单元进行 stagger 或动画处理。
- 05绘制或变形 SVG
SVG 相关插件通过动画 stroke dash 值实现描边动画效果，或通过动画 path 的 d 属性实现形状变形。
- 06使用缓动与物理插件
缓动插件添加自定义曲线或具名 ease；物理插件则根据速度、角度和重力值驱动运动。