互動
Snap:吸附進度
放開捲動後吸附到特定進度(例如整頁面板 0 / 0.33 / 0.66 / 1)。
導讀
放開捲動後,進度會被吸到最近的固定點(例如四個全幅面板的 0 / ⅓ / ⅔ / 1)。
- 看什麼
- 停在兩頁中間時,是否被「吸」到某一頁置中。
- 怎麼試
- 加大 delay / duration,或關掉 snap,對比吸附強弱。
Skill 對應:snap, scrub, pin
snap: 1 / (n - 1)可把 n 個等高面板均分吸附- 也可傳 array、labels,或物件設定 duration / delay / ease
- 放開捲動後吸附;用 GUI 改 duration / delay 感受「黏」的程度
ScrollTrigger.create({
trigger: panels[0],
start: "top top",
endTrigger: panels.at(-1),
end: "bottom bottom",
snap: {
snapTo: 1 / (panels.length - 1),
duration: { min: 0.15, max: 0.45 },
delay: 0.05,
ease: "power1.inOut"
}
});01
02
03
04