核心

播放控制 · repeat · yoyo

儲存 tween 實例後 play / pause / reverse / restart / progress；搭配 repeat、yoyo 與 yoyoEase。

導讀

GSAP 勝出 CSS 的關鍵之一：可隨時中斷、反轉、seek。先拿到回傳的 tween 再控制；yoyoEase 決定回程緩動。

看什麼
進度條與 time 數字；yoyo 來回時方向翻轉，yoyoEase 改變回程曲線。
怎麼試
ease 用 power2.in、yoyoEase 用 true 感受回程自動變 out；再改成另一條 ease 對比。
Skill 對應：tween.play/pause/reverse/restart/progress · repeat · yoyo · yoyoEase · overwrite
  • 所有 tween 方法都會回傳實例：const t = gsap.to(...)
  • repeat: -1 無限；搭配 yoyo: true 來回
  • yoyoEase: true 會為回程自動取 ease 的反相（如 power2.in → power2.out）；也可指定另一條 ease
  • progress(0.5) 可 seek；拖滑桿等同手動控制播放頭
  • overwrite: "auto" 只清重疊屬性的活躍 tween
const t = gsap.to(".box", {
  x: 240, rotation: 360,
  duration: 2, repeat: 1, yoyo: true,
  ease: "power2.in", yoyoEase: true
});
t.pause(); t.play(); t.reverse(); t.progress(0.5);
controls
▶

progress 0.00 · time 0.00