Demo - Dynamic Animation Library Using Animate.css

Back to post

Animate.css-Dynamic is a very useful and easy-to-use jQuery animation library that allows you to use animations dynamically to any elements with the help of Animate.css. You can animate each of the elements according to your requirements without the need of changing anything in the source library.

Features:

Animation is depending on Animate.css, so you will need to add Animate.css.
Very useful and easy to use.
Works without any JS call.
Animation works on Scroll, Click, Hover, Keypress, or Page Load.

How to use it:

1. Include the Javascript animate.min.js at the bottom of the web page.

<script src="https://cdn.jsdelivr.net/gh/KodingKhurram/animate.css-dynamic@main/animate.min.js"></script>

2. Include the CSS animate.min.css in the header of the page.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

3. After installing Animate.css-Dynamic, add the class ani_{animation name} where: {animation name} is a valid animation name from animate.css library, as in here.

4. Add the basic HTML to the page.

<h4 class="ani_bounce">An animated element.</h4>

Animate on Click

HTML structure

<div class="ani_pulse aniUtil_onClick aniUtil_active">
   <img src="images/img-1.jpg" alt="">
</div>

Animate on Hover

HTML structure

<div class="ani_tada aniUtil_onMouse aniUtil_active">
   <img src="images/img-2.jpg" alt="">
</div>

Active on Scroll

HTML structure

<div class="animation-dramatic-content animate-dramatic ani_fadeInLeft aniUtil_active">
  <img src="images/img-3.jpg" alt="">
</div>

Active and Dramatic on Scroll

HTML structure

<div class="animation-dramatic-content animate-dramatic ani_fadeInLeft aniUtil_dramatic aniUtil_active">
  <img src="images/img-1.jpg" alt="">
</div>

Out and In on Scroll

HTML structure

<div class="animation-dramatic-content animate-dramatic aniCus_OutIn-bounceOutLeft-bounceInRight aniUtil_active animate__bounceInRight animate__animated">
  <img src="images/img-2.jpg" alt="">
</div>