A JavaScript Library For Screen Intersected Animations | Scrollmotion

Scroll-motion

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

Scroll-motionDemo


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.