Animate In Elements On Scroll – AnimateMe

AnimateMe is a modern JS library to create custom CSS animations on DOM elements when scrolled into the viewport.

How to use it:

Install the AnimateMe.

# Yarn
$ yarn add animateme
# NPM
$ npm install animateme --save

Import the AnimateMe.

import AnimateMe from 'animateme';
@import 'animateme/dist/animate.me.css';

Initialize the AnimateMe on the desired element you want to animate.

new AnimateMe('.element');

That’s it. You can apply your own CSS animations to the element when scrolled into view.

.animate-me--in {
  /* styles here */
}

Possible customizable options which can be passed via either JavaScript or data attribute as follows:

<div class="element"
     data-offset="120"
     data-animation="your-class">
     Element To Animate
</div>

// or 
new AnimateMe('.element',{
    // half of the viewport
    offset: 0.5,
    // reverse animation
    reverse: true,
    // default animation class
    animatedIn: 'animate-me--in',
    // default attributes
    offsetAttr: 'data-offset',
    animationAttr: 'data-animation',
    // enable/disable the plugin on the touch
    touchDisabled: true
    
});