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

Category: Animation , Javascript , Recommended | November 3, 2018
Author: jshjohnson
Views Total: 2,794
Official Page: Go to website
Last Update: November 3, 2018
License: MIT

Preview:

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

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.

You Might Be Interested In:


Leave a Reply