Animate In Elements On Scroll – AnimateMe

Category: Animation , Javascript | November 2, 2018
Author: scriptex
Views Total: 808
Official Page: Go to website
Last Update: November 2, 2018
License: MIT

Preview:

Animate In Elements On Scroll – AnimateMe

Description:

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
    
});

You Might Be Interested In:


Leave a Reply