Creating Scroll Based Animations With Pure JavaScript – ScrollTrigger

ScrollTrigger is a really small (~2kb minified) JavaScript library which lets you apply scroll-triggered animations to any element.

The goal is to add certain CSS classes to elements when they’re scrolled into view. So that you can create CSS3-powered animations whatever you like.

How to use it:

Download and include the ScrollTrigger.js on the webpage and you’re ready to go.

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

Initialize the ScrollTrigger and we’re ready to go.

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

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

• • 200: triggers the animation at a specified scroll position (200px).
  • animateIn: CSS classed to be applied when the element is scrolled into view.
  • animateOut: CSS classes to be applied when the elements is scrolled out of view.
  • addHeight: adds the element’s height to the scroll offset.
  • once: makes sure the animation only happens once.

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

Changelog:

v1.0.6 (02/16/2023)

• Update dependencies