互動

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