For full API see Gsap ScrollTrigger API.
Usage
A parallax can be achieved by assigning ScrollTrigger to a tween or a timeline.
You can use scrub: true to animate only when scrolling, or scrub: <Number> for the number of seconds to animate during scrolling.
| Syntax | Default / Arguments | Description | |
|---|---|---|---|
| Option | scrub:Boolean|Number | false | Scrub the animation |
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 |
Actions
Use toggleActions to control the playhead on ScrollTrigger events (scroll to the end and up to see it in action).
| Syntax | Default / Arguments | Description | |
|---|---|---|---|
| Option | toggleActions:String | false | Control animation onEnter, onLeave, onEnterBack, and onLeaveBack, you can use 'play', 'pause', 'resume', 'reset', 'restart', 'complete', 'reverse', and 'none'. |
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 |
Use pin: true to pin the trigger when scrolling.
| Syntax | Default / Arguments | Description | |
|---|---|---|---|
| Option | pin:Boolean|String|Element | false | Pin the trigger when scrolling |
| Option | pinSpacing:Boolean|String | true | Add distance spacing for the pinned element |
If you need full range of animation also on top and bottom of the page, calculate it and add to start and end.
Multiple
You can add multiple ScrollTriggers and animations on the same elements.
When multiple scrolltrigger animate the same properties use
immediateRender: falseon sequential modification of the property.
Content
Here's an example of parallax on images with media.