4eck-animate-on-scroll

animate-on-scroll

Installation

npm i ns-animate-on-scroll --save

In your .js file:

    let animateOnScroll = require('ns-animate-on-scroll');
    
    let options = {
        debounceValue: 100
    }
    
    animateOnScroll(options);

Usage

Add three css classes to the block you want to be animated 'js-animated js-animated-$cssAnimationName $cssAnimationName', For example:

    <div class = "js-animated js-animated-fade-in fade-in">
        <h1>Lorem Ipsum is simply dummy text of the printin</h1>
        <p>as opposed to using 'Content here, content here', making it look like re</p>
    </div>
    

The package does not include css animations, so you have to add it in your project by your own, example:

.fade-in {
  animation-name: fadeIn;
  animation-duration: .45s;
  animation-fill-mode: both;
  animation-delay: .1s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

Options

debounceValue: number ( default: 50 );