scroll-visibility-js

Scroll-Visibility-JS

To add this package to your next project, simply download /view.js or run npm install scroll-visibility-js –save-dev and import it.

When importing and initializing the package, you can invoke one of two modules: "_util" (obj) or "ScrollView" (class).

import { ScrollView, _util as scroll } from 'scroll-visibility-js';

const newScrollObject = new ScrollView({
  callback: () => console.log(this), // this represents the inview element
  offset: 0,
  repeat: true 
});

const element1 = document.getElementById('demo');
const element2 = document.getElementById('demo');

scroll.fromTop(element1); // returns boolean
scroll.progress(element1); // returns num from 0 to 100
scroll.overlap(element1, element2 ); // returns boolean
scroll.scrollPostion(); // returns pixel quantity
scroll.visibility(element2); // returns boolean

By default, the module targets data-scrollvisibility elements and inserts their initial values as the animation-driving class. For instance, the element <a href="#" data-scrollvisibility="fadeIn"></a> will become <a href="#" class="fadeIn" data-scrollvisibility="true"></a> once in the viewport. Thus, it's best to structure your scss file in the following manner to perform scroll-based effects:

[data-scrollvisibility]{
  opacity: 0;
  visibility: hidden;
  
  &.fadeIn {
    transition: all 350ms ease-in-out;
    transform: translateY(100px);  
  }
  
}

[data-scrollvisibility="true"]{
  opacity: 1;
  visibility: visible;
  
  &.fadeIn {
    transform: translateY(0);
  }
  
}