ScrollTriggerのコールバック

最終更新日

コールバック

  • onEnter:スクロール位置が「start」を超えて上方向に移動した時
  • onEnterBack:スクロール位置が「end」を過ぎて下方向に移動した時
  • onLeave:スクロール位置が「end」を超えて上方向に移動した時
  • onLeaveBack:スクロール位置が「start」を過ぎて下方向に移動した時
  • onRefresh:リフレッシュが発生した時に、ScrollTriggerに全ての位置を再計算させるため
  • onUpdate:スクロールトリガーの進捗状況が変化するたびに呼び出されるコールバック
  • onToggle:スクロール位置が「start」または「end」を超えた時

例)

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');
		},
	},
});