Animating Visible Elements On Scroll – Animate.js

Animate.js is a JavaScript library that applies custom animations to elements as they become visible in the viewport when scrolling.

How to use it:

Include the Animate.js on the webpage.

<script src="js/dist/animate.js"></script>

Include the Animate.CSS for CSS3 based animations (OPTIONAL).

<link rel="stylesheet" href="/path/to/animate.css">

Add the required attribute ‘data-animate’ to html elements and use the ‘data-animation-classes’ attribute to specify the animation types.

<div data-animate data-animation-classes="animated shake"></div>
<div data-animate data-animation-classes="animated jello"></div>
<div data-animate data-animation-classes="animated wobble"></div>
<div data-animate data-animation-classes="animated rubberBand"></div>
<div data-animate data-animation-classes="animated swing"></div>

Create a new Animate instance.

var animate = new Animate({
    // options here
});

Initialize the Animate.js.

animate.init();

All possible options and callbacks.

{
    animatedClass: 'js-animated',
    offset: [0.5, 0.5],
    delay: 0, 
    remove: true, // remove class after completation
    scrolled: false, // animate after element has beed scrolled
    target: '[data-animate]',
    reverse: false,
    disableFilter: null, // function to determine whether Animate should animate elements.
    onLoad: true,
    onScroll: true,
    onResize: false,
    callbackOnInit: function() {},
    callbackOnInView: function() {},
    callbackOnAnimate: function() {},
}

Changelog:

08/05/2018

• v1.4.0: Options & Callback updated