jQuery Plugin To Manage Animate.css Based Animations - animate.css.js

animate.css.js is a jQuery/JavaScript helper for Animate.css that helps you manage, control CSS3 animations on modern browsers.

How to use it:

1. Include the necessary animate.css and jQuery library on the html page.

<link rel="stylesheet" href="/path/to/animate.min.css">
<script src="/path/to/jquery.min.js"></script>

2. Include the JavaScript animate.css.js after jQuery.

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

3. Animate your element using a CSS3 animation of your choice.

$('body').animatecssjs('zoomIn');

4. Config the animation with the following options.

$('body').animatecssjs({

  // animation type
  type: null,

  // infinite loop
  infinite: false,

  // reset the element when the animation ends
  reset: true,

  // hide scrollbar
  hideScrollbar: true
  
});

5. Advanced usages.

window.animatecssjs({$el: $('#el')}).then(() => {
  console.log('Finished')
});

window.animatecssjs('#el'}).then(() => {
  console.log('Finished')
});

window.animatecssjs('.el1').then(() => {
  return animate('.el2')
}).then(() => {
  return animate('.el3')
});

Change log:

2017-09-28

• small changes.

2016-11-22

• methods update

---

This awesome jQuery plugin is developed by lzwme. For more Advanced Usages, please check the demo page or visit the official website.