基礎

Basic Trigger + toggleActions

用 start / end 定義觸發區間，以 toggleActions 控制進出視窗時的播放行為。

導讀

把動畫想成「到達某條線就播／離開就反轉」——事件驅動，不是跟著手指連續走。

看什麼
box 碰到 start / end 線（markers）時，是否 play 或 reverse。
怎麼試
改 toggleActions 與 start，對照「只進場播一次」vs「進出都反轉」。
Skill 對應：trigger, start, end, toggleActions, markers
  • start: "top center" = 觸發元素頂端碰到視窗中央時開始
  • toggleActions 四個字：onEnter · onLeave · onEnterBack · onLeaveBack
  • 右下角 GUI 可即時改參數；改完後請再捲動觀察
gsap.to(".box", {
  x: 280,
  duration: 1,
  scrollTrigger: {
    trigger: ".box",
    start: "top center",
    end: "bottom center",
    toggleActions: "play reverse play reverse",
    markers: true
  }
});
向下捲動，觀察 box 進出「中央線」時的播放 / 反轉
trigger · toggleActions
A

進入 start → play；離開 end → reverse；往回捲也會再 play / reverse

繼續捲，再往上捲看看 reverse 行為
結束區