進階

假水平捲動 + containerAnimation

垂直捲動驅動水平移動;ease 必須是 none。巢狀觸發用 containerAnimation。

導讀

手指仍垂直捲,內容水平滑。水平 tween 必須 ease: none,巢狀觸發靠 containerAnimation。

看什麼
往下捲 = 面板往左滑;Panel 02 的「巢狀」box 在水平途中才放大。
怎麼試
調 scrub 與 end 倍率;改巢狀 start,看中途觸發早晚。
Skill 對應:pin, scrub, ease:none, containerAnimation
  • 水平移動的 tween / timeline 必須 ease: "none",否則捲動與位置對不齊
  • pin 外層、動畫內層 track(不要 pin 又同時 x 同一個元素)
  • 調 scrub 與 end 倍率,感受水平滑過快慢;巢狀用 containerAnimation
const scrollTween = gsap.to(track, {
  x: () => -(track.scrollWidth - window.innerWidth),
  ease: "none",
  scrollTrigger: {
    trigger: shell,
    pin: true,
    scrub: 1,
    end: () => `+=${track.scrollWidth}`
  }
});
往下捲 = 水平滑過四個面板
fake horizontal

Panel 01

垂直捲動驅動

Panel 02

巢狀

用 containerAnimation 在水平中途觸發

Panel 03

ease: none 很重要

Panel 04

結束

回到垂直文件流