進階

Timeline + ScrollTrigger

把 scrollTrigger 掛在 timeline 上，用 scrub + pin 編排多步驟捲動動畫。

導讀

多步驟動畫掛在 timeline，再整段綁捲動；progress 對應整條時間軸，不是單一 tween。

看什麼: A → B → C 依序演出，上方進度條與 progress 數字同步。
怎麼試: 拉長 end 距離：同一段 timeline 會「播得更久」，步驟被拉得更開。

Skill 對應：timeline + scrollTrigger（不可掛在子 tween）

正確：gsap.timeline({ scrollTrigger: {...} }).to(...)
錯誤：在 timeline 的子 tween 上再掛 scrollTrigger
用 GUI 拉長 end 或改 scrub，感受 timeline 總時長映射到捲動距離

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".container",
    start: "top top",
    end: "+=2000",
    scrub: 1,
    pin: true
  }
});
tl.to(".a", { x: 100 })
  .to(".b", { y: 50 })
  .to(".c", { opacity: 0 });

Timeline 三幕：位移 → 旋轉 → 淡出

timeline progress ↔ scroll

progress 0.00

Timeline 結束