進階
假水平捲動 + 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}`
}
});Panel 01
垂直捲動驅動
Panel 02
巢狀
用 containerAnimation 在水平中途觸發
Panel 03
ease: none 很重要
Panel 04
結束