By default, ScrollTrigger simply plays the linked animation
when the
start scroll position is hit, but it can
perform any of the following actions at any of the four
toggle points: play, pause, resume, reverse, complete,
restart, reset, or none.
This line's animation will
play when it enters the viewport, and then take
no other actions after that. It's the default
toggleActions: "play none none none"
This line's animation will
restart when it enters the viewport then
pause when it leaves, resume when
scrolled back into view, and finally pause when it
leaves again (scrolled all the way back).
toggleActions: "restart pause resume pause"
This line's animation will
play when it enters the viewport,
complete when it leaves,
reverse when you scroll it backwards into the
viewport again, and reset when you go all the
way back past the beginning.
toggleActions: "play complete reverse reset"
This line's animation will
play when its top edge hits the center of the
viewport (start: "top center"), then it
will pause 100px from the top of the viewport
(end: "top 100px"). Scrolling backward past that
point will resume, and scrolling all the way
back past center will pause again. The tween
also has an infinite repeat.toggleActions: "play pause resume pause"
DONE!