Apply Animate.css Animations To Elements Dynamically - Animate.js

Animate.js is a jQuery plugin that allows you to dynamically apply Animate.css based CSS3 animations to elements using CSS utility classes.

Key Features:

• Works with the latest Animate.css (v4+).
• Triggered on Scroll, Click, Hover, Keypress, or Page Load.
• Easy to implement without any JS call.

See It In Action:

How to use it:

1. To get started, include the latest version of jQuery library, Animate.css, and Animate.js on the page.

<!-- Animate.css -->
<link rel="stylesheet" href="/path/to/cdn/animate.min.css" />

<!-- jQuery -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- Animate.js -->
<script src="/path/to/cdn/animate.min.js"></script>

2. Apply an animation of your choice to the target element using the syntax: ani_{animationName}.

<div class="ani_pulse">
  Pulse Animation
</div>

3. Trigger the animation on click.

<div class="ani_pulse aniUtil_onClick">
  Pulse Animation
</div>

4. Trigger the animation on mouse hover.

<div class="ani_pulse onMouse">
  Pulse Animation
</div>

<!-- Repeat The Animation Until Mouseout -->
<div class="ani_pulse aniUtil_active onMouse aniUtil_onMouseRepeat">
  Pulse Animation
</div>

5. Trigger the animation as the element is scrolled into view.

<div class="ani_pulse aniUtil_dramatic">
  Pulse Animation
</div>

6. Animate the elements inside a scrollable container as they become visible.

<div class="aniUtil_scrollDiv">
  <div class="aniIn_pulse">
    Pulse Animation
  </div>
  <div class="aniIn_pulse">
    Pulse Animation
  </div>
  <div class="aniIn_pulse">
    Pulse Animation
  </div>
</div>

7. Trigger the animation when you press a specific key.

<div class="ani_pulse aniUtil_onKey-ArrowUp">
  Pulse Animation
</div>

8. Determine whether to repeat the animation.

<div class="ani_pulse aniUtil_active">
  Pulse Animation
</div>

9. It also provides 4 custom animations named 'clickDisabled', 'tubeLight', 'aniCus_OutIn', and 'aniCus_text'.

<button class="aniCus_clickDisabled">
  Click Me
</button>

<div class="aniCus_tubeLight aniUtil_active">
  tubeLight Animation
</div>

<div class="aniCus_OutIn-bounceOutLeft-bounceInRight aniUtil_active">
  tubeLight Animation
</div>

<div class="aniCus_text-fadeInLeft aniUtil_active aniUtil_active">
  aniCus_text Animation
</div>

10. API methods.

// disable all animations
aniUtil_disable(all);

// disable all custom animation
aniUtil_disable(custom);

// disable all attention seekers animations.
aniUtil_disable(seekers);

// disable all back in/Out animations
aniUtil_disable(back);

// disable all backIn animations
aniUtil_disable(backIn);

// disable all backOut animations
aniUtil_disable(backOut);

// disable all custom animation
aniUtil_disable(custom);

// enable all animations
aniUtil_enable(all);

// disable all custom animation
aniUtil_enable(custom);

// disable all attention seekers animations.
aniUtil_enable(seekers);

// enable all back in/Out animations
aniUtil_enable(back);

// enablee all backIn animations
aniUtil_enable(backIn);

// enable all backOut animations
aniUtil_enable(backOut);

// enable all custom animation
aniUtil_enable(custom);

// apply an animation to the target element
aniUtil_animate(object/selector/regex element, animation_class/es);

// disable animation on a specific element
aniUtil_inanimate(object/selector/regex element);

// reset animation on a specific element
aniUtil_reset(object/selector/regex element);

// flush animation classes from a specific element
aniUtil_flush(object/selector/regex element);

Changelog:

v2.13.5 (2021-12-04)

• Enhanced re-usability of functions a bit.
• Added a new custom animation.
• Enhanced entry criteria of interruption handing.
• Enhanced dramatic animations on click, hover and key press.
• Enhanced performance of key animations.

---

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