Fade
Scrolltrigger
Scroll

For full API see Gsap ScrollTrigger API.

Usage

A fade can be achieved by assigning ScrollTrigger by setting ScrollTrigger events to animate depending on scroll position relative to the trigger element. And using Gsap batch to control multiple ScrollTriggers.

You can toggle classes on activation using toggleClass: '<className>'.

SyntaxDefault / ArgumentsDescription
OptiontoggleClass:String|ObjectnullToggle class with ScrollTrigger activation/deactivation

You can also use once: true to destroy ScrollTrigger as soon as the end position is reached once.

SyntaxDefault / ArgumentsDescription
Optiononce:BooleanfalseActivate only once

Distance

Use trigger, start, endTrigger, end to control activation depending on position of trigger relative to viewport.

Use endTrigger: 'html' and end: 'bottom top' to make the end position infinite.

SyntaxDefault / ArgumentsDescription
Optiontrigger:String|ElementundefinedScroll trigger
Optionstart:String|Number|Function'top bottom'Start position: first argument is for trigger second argument is for scroller
OptionendTrigger:String|ElementfalseEnd trigger
Optionend:String|Number|Function'bottom top'End position: first argument is for endTrigger second argument is for scroller

Here's an example of distance fade with animation depending on direction.

Event

You can use onEnter, onLeave, onEnterBack, onLeaveBack, onToggle, onUpdate, onScrubComplete, and onRefresh to animate depending on scroll position relative to the trigger element.

Use Gsap stagger to control animation stagger.