Minimal Scrolling Library In Vanilla JavaScript – scrollTriggers.js

Category: Animation , Javascript | April 18, 2020
Author: attitude
Views Total: 149 views
Official Page: Go to website
Last Update: April 18, 2020
License: MIT

Preview:

Minimal Scrolling Library In Vanilla JavaScript – scrollTriggers.js

Description:

scrollTriggers.js is a vanilla JavaScript library which allows to execute specific callback functions when a specific element is scrolling into or out of view. Great for applying CSS/JS powered animations to the element based on the scroll position.

Basic usage:

Import the main JavaScript file ‘scrollTriggers.min.js’ into the html page.

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

Create a new ‘addScrollingTriggers’ object and specify the target container on which you want to trigger corresponding functions while scrolling.

window.addScrollingTriggers([{

  // target element
  el: 'element',
  before: function() {
    // do something
  },
  during: function () {
    // do something
  },
  after: function () {
    // do something
  },

  // from 0 to 1
  // where 0 = top of the screen, 1 = bottom of the screen
  origin: 0.5
  
}]);

Changelog:

v1.0.3 (04/18/2020)

  • Updated

You Might Be Interested In:


Leave a Reply