npm i ns-animate-on-scroll --save
In your .js file:
let animateOnScroll = require('ns-animate-on-scroll');
let options = {
debounceValue: 100
}
animateOnScroll(options);
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;
}
}
debounceValue: number ( default: 50 );