jQuery Plugin To Handle Animate.css Powered CSS3 Animations - aniAuto

aniAuto is a tiny, flexible jQuery plugin which allows to create configurable, complex, Animate.css based CSS3 animations on any DOM elements.

How to use it:

1. Load the awesome Animate.css CSS3 animation library in the header of the html page.

<link rel="stylesheet" href="/path/to/animate.min.css">

2. Load jQuery library and the jQuery aniAuto plugin in the page.

<script src="//code.jquery.com/jquery-3.1.0.slim.min.js"></script>
<script src="js/aniAuto.min.js"></script>

3. Add the 'ani-auto' class and an animation class of your choice to the DOM element as follow:

<div id="demo" class="ani-auto tada" >
  demo item
</div>

4. Config the animation using the following attributes:

• ani-init-hide: hide on init
• ani-delay: delay in ms before trigger the animation
• ani-duration: animation duration in ms
• ani-iteration: repeat times
• ani-trigger: trigger element
• ani-scroll ani-scroll-offset: auto scroll (with offset)

<div class="ani-auto tada" 
     ani-init-hide
     ani-delay="1s"
     ani-duration="1s"
     ani-iteration="5"
     ani-trigger="#trigger-element"
     ani-scroll 
     ani-scroll-offset="-2%"
     >
     ...
</div>

Change log:

2016-11-08

• JS update

---

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