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

Apply Animate.css Animations To Elements Dynamically - Animate.js
File Size: 8.4 KB
Views Total: 163
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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>

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 3 custom animations named 'clickDisabled', 'tubeLight', and 'aniCus_OutIn'.

<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>

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 the animation on your element
aniUtil_inanimate(object/selector/regex element);

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