響應式

matchMedia + 減少動態

gsap.matchMedia() 依斷點與 prefers-reduced-motion 建立／自動 revert 動畫。

導讀

桌面／手機用不同位移，使用者偏好減少動態時 duration: 0——matchMedia 會自動清掉不匹配的動畫。

看什麼: HUD 顯示目前命中的 condition；縮視窗或開關 reduce 模擬。
怎麼試: 縮到窄寬度看 rotation 變小；勾選 reduce 看動畫瞬間歸零。

Skill 對應：gsap.matchMedia, conditions, prefers-reduced-motion, mm.revert

mm.add(conditions, (ctx) => {...})：不匹配時自動 revert
務必處理 prefers-reduced-motion（duration: 0 或跳過）
不要在 matchMedia 裡再巢狀 gsap.context()
元件卸載呼叫 mm.revert()

const mm = gsap.matchMedia();
mm.add({
  isDesktop: "(min-width: 800px)",
  reduceMotion: "(prefers-reduced-motion: reduce)"
}, (ctx) => {
  const { isDesktop, reduceMotion } = ctx.conditions;
  gsap.to(".box", {
    rotation: isDesktop ? 360 : 180,
    duration: reduceMotion ? 0 : 1.2
  });
});

matchMedia

viewport: —
isDesktop (≥800px): —
reduceMotion: —
applied rotation / duration: —

縮放瀏覽器寬度會自動切條件；也可按「模擬 reduce-motion」強制 duration: 0。