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

File Size: 10.7 KB
Views Total: 1600
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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


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