Minimal jQuery Plugin To Control Animate.css Animations - Animator
File Size: | 94.9 KB |
---|---|
Views Total: | 2381 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Animator is a super lightweight jQuery plugin that applies CSS3 animations (with variable animation speed) to any DOM elements using Animate.css library. Also provide a function to trigger the animation when the element is within the viewport.
How to use it:
1. Load the necessary Animate.css and jQuery library in the html document.
<link rel="stylesheet" href="/path/to/animate.css"> <script src="/path/to/jquery-3.2.0.slim.min.js"></script>
2. Load the jQuery Animator plugin's script right before the closing body tag.
<script src="jquery.animator-beta.min.js"></script>
3. Apply a CSS animation of your choice to the target element.
// $('#el').addAnimation(Name,Speed) $('#el').addAnimation('lightSpeedIn',500)
4. Trigger the CSS animation when the element becomes visible on the screen.
if($('#el').isOnScreen()){ $('#el').addAnimation('lightSpeedIn'); }
5. You're also allowed to remove the animation as this:
$('#el').removeAnimation('lightSpeedIn');
This awesome jQuery plugin is developed by zugoripls. For more Advanced Usages, please check the demo page or visit the official website.