Animate In Elements On Scroll – AnimateMe

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


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