ScrollTrigger

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 powerful. 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. 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.