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>'.
| Syntax | Default / Arguments | Description | |
|---|---|---|---|
| Option | toggleClass:String|Object | null | Toggle class with ScrollTrigger activation/deactivation |
You can also use once: true to destroy ScrollTrigger as soon as the end position is reached once.
| Syntax | Default / Arguments | Description | |
|---|---|---|---|
| Option | once:Boolean | false | Activate only once |
Distance
Use trigger, start, endTrigger, end to control activation depending on position of trigger relative to viewport.
Use
endTrigger: 'html'andend: 'bottom top'to make the end position infinite.
| Syntax | Default / Arguments | Description | |
|---|---|---|---|
| Option | trigger:String|Element | undefined | Scroll trigger |
| Option | start:String|Number|Function | 'top bottom' | Start position: first argument is for trigger second argument is for scroller |
| Option | endTrigger:String|Element | false | End trigger |
| Option | end: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.