Parallax
Scrolltrigger
Scroll

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.

SyntaxDefault / ArgumentsDescription
Optionscrub:Boolean|NumberfalseScrub the animation

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

Actions

Use toggleActions to control the playhead on ScrollTrigger events (scroll to the end and up to see it in action).

SyntaxDefault / ArgumentsDescription
OptiontoggleActions:StringfalseControl 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' 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

Use pin: true to pin the trigger when scrolling.

SyntaxDefault / ArgumentsDescription
Optionpin:Boolean|String|ElementfalsePin the trigger when scrolling
OptionpinSpacing:Boolean|StringtrueAdd 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: false on sequential modification of the property.

Content

Here's an example of parallax on images with media.