ScrollTriggerのコールバック
コールバック
- onEnter:スクロール位置が「start」を超えて上方向に移動した時
- onEnterBack:スクロール位置が「end」を過ぎて下方向に移動した時
- onLeave:スクロール位置が「end」を超えて上方向に移動した時
- onLeaveBack:スクロール位置が「start」を過ぎて下方向に移動した時
- onRefresh:リフレッシュが発生した時に、ScrollTriggerに全ての位置を再計算させるため
- onUpdate:スクロールトリガーの進捗状況が変化するたびに呼び出されるコールバック
- onToggle:スクロール位置が「start」または「end」を超えた時
例)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
gsap.to('#sample', { scrollTrigger: { trigger: '#sample', start: 'top top', end: 'bottom top', pin: true, anticipatePin: 1, toggleActions: 'play none none none', markers: true, onLeaveBack: () => { gsap.to(window, { duration: 0, scrollTo: '#sample2' }) }, onToggle: () => { console.log('onToggle'); }, }, }); |