The most basic usage of ScrollTrigger is to trigger classes based on the current scroll position. E.g. when an element enters the viewport, fade it in. You can add custom offsets per element, or set offsets on the viewport (e.g. always trigger after the element reaches 20% of the viewport)
When using the callbacks ScrollTrigger becomes really powerfull. You can run custom code when an element enters / becomes visible, and even return Promises to halt the trigger if the callback fails. This makes lazy loading images very easy.
The easiest way to start is to create a new instance and add some triggers to it, with all default values. This will toggle the 'visible' class when the element comes into the viewport, and toggles the 'invisible' class when it scrolls out of the viewport.
// Create a new ScrollTrigger instance with default options
const trigger = new ScrollTrigger()
// Add all html elements with attribute data-trigger
trigger.add('[data-trigger]')
// Now in your CSS add the following classes, this
fades the [data-trigger] elements in and out
.visible, .invisible {
opacity: 0.0;
transition: opacity 0.5s ease;
}
.visible {
opacity: 1.0;
}
Adding callbacks / different classes can be done globally, this becomes the default for all triggers you add, or you can specify custom configuration when adding a trigger.
// Create a new ScrollTrigger instance with some custom options
const trigger = new ScrollTrigger({
trigger: {
once: true
}
})
// Add all html elements with attribute data-trigger, these elements will only be triggered once
trigger.add('[data-trigger]')
// Add all html elements with attribute data-triggerAlways, these elements will always be triggered
trigger.add('[data-triggerAlways]', { once: false })
For more examples, checkout the /demo directory on GitHub.