列表
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%"
});Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
Card 7
Card 8
Card 9
Card 10
Card 11
Card 12