Author: | jshjohnson |
---|---|
Views Total: | 4,274 views |
Official Page: | Go to website |
Last Update: | August 5, 2018 |
License: | MIT |
Preview:

Description:
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