Scrollmotion is a JavaScript library for crossover animation on the screen when scrolling a page. This library uses the Animate.css library (or any other animation libraries) to animate objects as they are passed into view.
Any browser which fully supports ES6, IntersectionObserver and MutationObserver.
intersection observer, intersection observer multiple elements, intersection observer api example, intersection observer animation, intersection animation
How to make use of it:
1. Install & download the package deal.
# NPM $ npm i @neoflow/scrollmotion --save
2. Load the Scrollmotion library from the dist folder.
<script src="dist/scrollmotion.js"></script>
3. Load the newest Animate.css library from a CDN.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" integrity="sha512-c42qTSw/wPZ3/5LBzD+Bw5f7bSF2oxou6wEb+I/lqeaKV5FDIfMvvRp772y4jcJLKuGUOpbJMdg/BTl50fJYAw==" crossorigin="anonymous" />
4. Determine the animation sort within the data-sm-animate-class attribute.
<div class="example" data-sm-animate-class="animate__bounceInDown"> Content To Animate On Scroll </div>
5. Initialize the Scrollmotion library on the component.
const sm = Scrollmotion('.sm-item');6. Start monitoring the scroll events and animating the component when it’s scrolled into view.
sm.start();
7. Config the scroll-triggered animation utilizing the next choices.
const sm = Scrollmotion('.sm-item',{
// root element
root: null,
// margin property of root element
rootMargin: '0px 0px 0px 0px',
// threshold to identify visibility changes
threshold: [0, 0.25, 0.5, 0.75, 1],
// how much an observed item has actually been visible, before the animation performs
// you can also pass this option via data-sm-ratio attribute
ratio: 0,
// enable MutationObserver API
observeMutation: false,
// callbacks
initialized: null,
started: null,
itemAnimated: null,
stopped: null
});
8. Use the next features to create your individual animations, relatively than utilizing the Animate.css library.
const sm = Scrollmotion('.sm-item',{
prepareItem: function (item) {
item.style.visibility = "hidden";
},
animateItem: function (item) {
item.style.visibility = "visible";
item.classList.add('animate__animated');
if (item.dataset.smAnimateClass) {
item.classList.add(item.dataset.smAnimateClass);
}
else {
item.classList.add(defaultConfig.animateClass);
}
},
});Scroll-driven Interactions In JavaScript, Scrollmotion Plugin/Github
See Demo And Download
Official Website(Neoflow): Click Here
This superior jQuery/javascript plugin is developed by Neoflow. For extra Advanced Usages, please go to the official website.