Configurable Animate.css Based Animations In jQuery - AnimateCSS

AnimateCSS is a tiny jQuery plugin for manipulating Animate.css animations on elements with additional features: duration, delay, easing, callback, and much more.

The purpose of the plugin is to make the well-know Animate.css library easy-to-use with jQuery.  Inspired by the jQuery animateCSS but more powerful.

How to use it:

1. Install, download, and include jQuery, Animate.css and the AnimateCSS plugin on the webpage.

# NPM
$ npm install @wahawaher/jquery-animate-css --save

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

2. Apply an animation (Animate.css animation class) to your element.

$('.element').animateCSS('fadeOutLeft');

3. Set the duration of the animation.

$('.element').animateCSS('fadeOutLeft', 1500);

// or
$('.element').animateCSS('fadeOutLeft', {
  duration: 1000
});

4. Execute a callabck function when the animation ends.

$('.element').animateCSS('fadeOutLeft', 1500, function () {
  $(this).animateCSS('fadeInRight', 650);
});

// or
$('.element').animateCSS('fadeOutLeft', {
  complete: function () {
    $(this).animateCSS('fadeInRight', 650);
  }
});

5. Set the time to wait before executing the animation. Default: 0.

$('.element').animateCSS('fadeOutLeft', {
  delay: 100
});

6. Apply an easing function to the animation.

$('.element').animateCSS('fadeOutLeft', 1500, function () {
  ease: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)'
});

7. The default CSS class applied to the element after init.

$('.element').animateCSS('fadeOutLeft', 1500, function () {
  class: 'animated'
});

8. Determin whether to remove all animation classes from the element when the animation ends. Default: false.

$('.element').animateCSS('fadeOutLeft', 1500, function () {
  clear: true
});

9. Execute a callback function when the animation starts.

$('.element').animateCSS('fadeOutLeft', {
  start: function () {
    // ...
  }
});

10. You can also set the options globally as follows:

$.fn.animateCSS.defaults = $.extend(true, {}, $.fn.animateCSS.defaults, {
  delay: 0, // delay, ms
  duration: 1000, // duration, ms
  ease: '', // animation timing function
  class: 'animated', // main animation class
  clear: false, // cleaning classes after the animation ends
  start: $.noop, // animation start callback
  complete: $.noop // animation end callback
});

Changelog:

2020-03-05

• v1.0.2

---

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