Customizable On-scroll Animations With JavaScript and Animate.css – Animate.js

Preview:

Description:

Animate.js is a pure JavaScript library which applies animate.css based cool CSS3 animations to DOM elements when they’re scrolled into view. Fully customizable and easy to implement.

Basic usage:

Load the required animate.css and Animate.js into the html page.

<link rel="stylesheet" href="animate.css">
<script src="animate.js"></script>

Add the ‘data-animate’ attribute to target element you want to animate when it becomes visible in the screen. And then specify the animation type using ‘data-animation-classes’ attribute as follows. You can find all available animations types here.

<div class="element js-animated" data-animate data-animation-classes="animated jello"></div>

Initialize the Animate.js with default options and we’re done.

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

Possible options with default values.

var animate = new Animate({
    // Class to be added to element once animation has completed.
    animatedClass: 'js-animated',
    // Percentage of element that needs to be in the viewport before the animation triggers.
    offset: 0.5,
    // Milisecond delay before animation is added to element in view.
    delay: 0,
    // Element/s to target. Once this element is in view, add animations.
    target: '[data-animate]',
    // Whether animation classes should removed when the animations complete.
    remove: true,
    // Once the element has left the top of the viewport (by the same offset), remove the animations from element. 
    // When the element comes back into view, it will animate again.
    reverse: false,
    // Animate any elements that a user has already scrolled past on load. 
    // This will only trigger if the onLoad option (see below) is true.
    scrolled: false,
    // Debugging information in console.
    debug: false,
    // Whether to fire on DOMContentLoaded.
    onLoad: true,
    // Whether to fire on scroll.
    onScroll: true,
    // Whether to fire on resize.
    onResize: false,
    // Function to determine whether Animate should animate elements.
    disableFilter: null,
    
});

Callback functions.

var animate = new Animate({
    // Function to run once Animate.js initialises
    callbackOnInit: function(){},
    // When element is in view
    callbackOnInView: function(el) {},
    // Function to run once animation has completed (pass parameter to access the animated element).
    callbackOnAnimate: function(){}
});

Changelog:

v1.4.1 (11/03/2018)

• Resolve vulnerabilities

v1.4.0 (10/27/2018)

• Add callback when element is in view.