列表

ScrollTrigger.batch()

多個元素進場時批次觸發,一次 stagger 動畫。適合卡片牆與 IntersectionObserver 替代。

導讀

多個元素進場時先「收集一批」,再一次 stagger——比每張卡各自一個 trigger 更協調。

看什麼
卡片是否成批浮現,而不是完全各自為政。
怎麼試
調 batchMax / interval:一批幾張、隔多久算同一批,差別很明顯。
Skill 對應:batch, interval, batchMax, onEnter targets
  • batch 的 callback 收到的是 (targets[], scrollTriggers[]),不是單一 instance
  • 不要傳 animation / scrub / snap 給 batch
  • 調 interval / batchMax / stagger,再慢慢往下捲看「一批一批」的差異
ScrollTrigger.batch(".fade-card", {
  interval: 0.1,
  batchMax: 4,
  onEnter: (batch) => gsap.to(batch, {
    opacity: 1, y: 0, stagger: 0.1, overwrite: true
  }),
  start: "top 85%"
});
慢慢往下捲,卡片會「一批一批」進場
ScrollTrigger.batch
Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
Card 7
Card 8
Card 9
Card 10
Card 11
Card 12
往回捲可用 onLeaveBack 重置(本示範有做)