常用免费插件

核心库负责补间；插件负责「一种场景」。下面每个都有迷你 demo。更完整的 Flip 筛选见案例页。

插件	干什么
ScrollTrigger	滚动驱动，见上一页
Flip	布局变化前后 FLIP（First Last Invert Play）
Draggable	拖拽、旋转、bounds、惯性需 InertiaPlugin
TextPlugin	字符串逐字替换
MotionPathPlugin	沿 SVG path 运动
Observer	统一滚轮/触摸/指针，做全屏滑页
ScrollToPlugin	`gsap.to(window, { scrollTo: "#id" })`
SplitText / DrawSVG 等	3.13+ 许多原会员插件已免费，按需引入

TextPlugin

Hello GSAP

gsap.to("#typeEl", {
  duration: 1.4,
  text: "Timeline · Stagger · Scroll",
  ease: "none"
});

Draggable — 拖这个盒子

DRAG

Draggable.create("#dragBox", {
  bounds: "#dragStage",
  type: "x,y",
  inertia: false
});

MotionPath — 沿椭圆走

gsap.to("#pathBox", {
  duration: 4,
  ease: "none",
  repeat: -1,
  motionPath: { path: "#orbit", align: "#orbit", autoRotate: true, alignOrigin: [0.5, 0.5] }
});

Observer — 在舞台上滚轮，旋转盒子

WHEEL

Observer.create({
  target: "#obsStage",
  type: "wheel,touch,pointer",
  onChangeY: (self) => gsap.to("#obsBox", { rotation: "+=" + self.deltaY * 0.2, duration: 0.3 })
});

ScrollToPlugin

gsap.to(window, { scrollTo: "#footer", duration: 0.8, ease: "power2.inOut" });

Flip 的最小公式：const state = Flip.getState(".item") → 改 DOM/class → Flip.from(state, { duration: 0.5, stagger: 0.05, absolute: true })。完整筛选画廊见 Flip 布局切换。