Creating Scroll Based Animations With Pure JavaScript – ScrollTrigger

Category: Animation , Javascript , Recommended | February 16, 2023
Views Total:111 views
Official Page:Go to website
Last Update:February 16, 2023


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

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>


v1.0.6 (02/16/2023)

  • Update dependencies

You Might Be Interested In:

Leave a Reply