Plugin

MotionPath：沿路徑移動

元素沿 SVG path 移動；align + autoRotate 讓方向跟著切線。

導讀

路徑動畫不必手算座標。align 對齊 path，autoRotate 讓物體朝向行進方向。

看什麼: 圓點沿曲線走；開 autoRotate 時「頭」會轉向。
怎麼試: 調 duration、autoRotate、start/end 進度區間。

Skill 對應：MotionPathPlugin, path, align, autoRotate, alignOrigin

path：SVG path 元素、selector 或 path 字串
align + alignOrigin: [0.5, 0.5] 讓元素中心對齊路徑
autoRotate: true 朝向切線；也可給角度偏移
可與 ScrollTrigger scrub 組合做路徑捲動

gsap.to(".dot", {
  duration: 3,
  motionPath: {
    path: "#curve",
    align: "#curve",
    alignOrigin: [0.5, 0.5],
    autoRotate: true
  },
  ease: "none"
});

MotionPath