Author: | jshjohnson |
---|---|
Views Total: | 809 views |
Official Page: | Go to website |
Last Update: | November 3, 2018 |
License: | MIT |
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.