Animate In Elements On Scroll – AnimateMe

Category: Animation , Javascript | November 2, 2018
Views Total:589 views
Official Page:Go to website
Last Update:November 2, 2018


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 install animateme --save

Import the AnimateMe.

import AnimateMe from 'animateme';
@import 'animateme/dist/';

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"
     Element To Animate
// 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