The primary use of ScrollTrigger is to trigger classes based on the current scroll position. For example, when an element enters the viewport it fades into it. You can add custom offsets for each element, or set offsets in the viewport (eg always triggered after the element reaches 20% of the viewport)

When using callbacks, ScrollTrigger becomes really powerful. You can run custom code when it enters/becomes an element visible, and even return promises to stop the trigger if the callback fails. This makes the lazy loading of images very easy.

Must Read: Create Fast And Simple Fullscreen One-Page Scrolling Websites | fullPage.js

How to make use of it:

Download and embed ScrollTrigger.js on the webpage.

<script src="ScrollTrigger.min.js"></script>

Configure ScrollTrigger.

document.addEventListener('DOMContentLoaded', function(){
  ScrollTrigger.init();
});

Set animations (CSS styles) and other options for the element you want to animate.

<div data-scroll="200 animateIn animateOut addHeight once"></div>

See Also –

Easily and Smoothly Fullpage Scroller | pageScroller.js
Angular Module For Page Scroll Locking | NGX Scroll locker
Simple One Page Scroll Navigation ES6 Vanilla.js Library | slide-nav

See Demo And Download

Official Website(terwanerik): Click Here

This superior jQuery/javascript plugin is developed by terwanerik. For extra Advanced usage, please go to the official website.