Author: | scriptex |
---|---|
Views Total: | 581 views |
Official Page: | Go to website |
Last Update: | November 2, 2018 |
License: | MIT |
Preview:

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