Creating Page Scroll Animation With Pure JavaScript | ScrollTrigger

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(){

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.

Related Posts


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…


Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…


Lightweight Bootstrap 4 Toast Notification Plugin | BS4 Advanced Toast

A lightweight Bootstrap 4 Toast Notification plugin integrated with JS/jQuery. bs4-toast.js is a JavaScript library that enhances the native Bootstrap toast component with icons, buttons, callbacks, and…


How to Create Audio Visualizations with JavaScript | Wave.js

Audio Visualizer Library – wave.js is a vanilla javascript audio visualization library that provides 20+ creative audio visualization effects to bring more engagement to your visitor. Contribute…


Modern Mobile Touch Slider With Acceleration Transitions | Swiper

Swiper is the most modern free mobile touch slider with accelerated device transitions and amazing original behavior. It is intended for use in mobile websites, mobile web…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

Leave a Reply

Your email address will not be published. Required fields are marked *