Minimal jQuery Plugin To Control Animate.css Animations - Animator

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

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.