v2.16.7

Author: KodingKhurram

README.md

@@ -10,20 +10,18 @@
 <span> <strong>Animate.css-Dynamic</strong> is an attempt to make Animate.css library dynamic in nature, in the sense, having control on animations, the basic idea is to animate the element when we want, and how we want, without need of changing anything in the source library <a href="https://animate.style/">{animate.css}</a>. </span>
 
 <h2> Installation </h2>
-<pre>
-    &lt;head>
-      &lt;link
-        rel = "stylesheet"
-        href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
-      />
-      <script
-        src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
-      </script>
-      <script
-        src = "https://cdn.jsdelivr.net/gh/KodingKhurram/animate.css-dynamic@main/animate.min.js">
-      </script>
-    &lt;/head>
-</pre>
+<pre>&lt;head>
+   &lt;link
+     rel = "stylesheet"
+     href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
+   />
+   <script
+     src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
+   </script>
+   <script
+     src = "https://cdn.jsdelivr.net/gh/KodingKhurram/animate.css-dynamic@main/animate.min.js">
+   </script>
+ &lt;/head></pre>
 
 <h2> Documentation and Demo </h2>
  <span> Documentation regarding usage and Demo is in the official <a href="https://animate-dynamic.ga" target="_blank"> website </a></span><br/>
@@ -35,7 +33,8 @@
   <li><a href="https://github.com/KodingKhurram/animate.css-dynamic/tree/v2.6.1/">v2.6.1</a></li>
   <li><a href="https://github.com/KodingKhurram/animate.css-dynamic/tree/v2.9.2/">v2.9.2</a></li>
   <li><a href="https://github.com/KodingKhurram/animate.css-dynamic/tree/v2.10.3/">v2.10.3</a></li>
-  <li><a href="https://github.com/KodingKhurram/animate.css-dynamic/tree/v2.13.5/">v2.13.5</a> {latest}</li>
+  <li><a href="https://github.com/KodingKhurram/animate.css-dynamic/tree/v2.13.5/">v2.13.5</a></li>
+  <li><a href="https://github.com/KodingKhurram/animate.css-dynamic/tree/v2.16.7/">v2.16.7</a> {latest}</li>
 </ul>
 
 <h2> License </h2>

animate.js

@@ -1,6 +1,6 @@
 /*
  * animate.js - animate-dynamic.ga
- * Version - v2.13.5
+ * Version - v2.16.7
  * Licensed under the MIT license - https://opensource.org/licenses/MIT
 
  * Copyright (c) 2021 Mohammed Khurram (KodingKhurram)
@@ -36,6 +36,7 @@ $(document).keyup(function(e){
 function aniUtil_dramatic(){
   //This function initializes element for dramatic animations
   $(".aniUtil_dramatic").each(function() {
+    $(this).css("opacity", 100);
     if(!$(this).hasClass("aniUtil_disabled") && !$(this).hasClass("animate__animated")){
       $(this).css("opacity", 0);
     }
@@ -210,6 +211,27 @@ function hover_Animations(){
             $(this).css("opacity", 100);
           }
           $(this).addClass(ani_classes);
+          if($(this).hasClass("aniUtil_onMouseRepeat")){
+            //Add repeat class
+            $(this).addClass("animate__infinite");
+          }
+          else if($(this).hasClass("aniUtil_active")){
+            this.addEventListener('animationend', () => {
+              $(this).removeClass(ani_classes);
+              if($(this).hasClass("aniUtil_dramatic")){
+                $(this).css("opacity", 0);
+              }
+            });
+          }
+          else{
+            $(this).removeClass("aniUtil_onMouse");
+          }
+        }
+      });
+      $(this).mouseout(function(){
+        //functional requirement for aniUtil_onMouseRepeat
+        if($(this).hasClass("aniUtil_onMouseRepeat")){
+          $(this).removeClass("animate__infinite");
           if($(this).hasClass("aniUtil_active")){
             this.addEventListener('animationend', () => {
               $(this).removeClass(ani_classes);
@@ -220,6 +242,7 @@ function hover_Animations(){
           }
           else{
             $(this).removeClass("aniUtil_onMouse");
+            $(this).removeClass("aniUtil_onMouseRepeat");
           }
         }
       });
@@ -336,6 +359,7 @@ function key_Animations(e){
 //get animation class
 function get_aniClasses(elem){
   //This function returns the animate.css animation classes for the element
+  elem = $(elem)[0];
   var ani_classes = '';
   var classname = elem.classList;
   $(classname).each(function(){
@@ -620,6 +644,8 @@ function aniUtil_disable(which){
       $(this).addClass("aniUtil_disabled");
     });
   }
+  //Re-initializing dramatic animations
+  aniUtil_dramatic();
 }
 
 //aniUtil_enable()
@@ -704,6 +730,8 @@ function aniUtil_enable(which){
       $(this).removeClass("aniUtil_disabled");
     });
   }
+  //Re-initializing dramatic animations
+  aniUtil_dramatic();
 }
 
 //aniUtil_animate()
@@ -713,8 +741,11 @@ function aniUtil_animate(elem, ani_Class){
     $(elem).removeClass('aniUtil_disabled');
   }
   $(elem).addClass(ani_Class);
+  if(!$(elem).hasClass("aniUtil_onClick") && !$(elem).hasClass("aniUtil_onMouse"))
   view_Animations();
+  if($(elem).hasClass("aniUtil_onClick"))
   click_Animations();
+  if($(elem).hasClass("aniUtil_onMouse"))
   hover_Animations();
 }
 
@@ -723,3 +754,12 @@ function aniUtil_inanimate(elem){
   //This function inanimates/disables the animation for a perticular element
   $(elem).addClass('aniUtil_disabled');
 }
+
+//aniUtil_reset()
+function aniUtil_reset(elem){
+  //This function resets the animation for a perticular element
+  var reset_classes = get_aniClasses(elem);
+  $(elem).removeClass(reset_classes);
+  if(!$(elem).hasClass("aniUtil_onMouse") && !$(elem).hasClass("aniUtil_onClick") && !$(elem).is('[class*="aniCus_onKey"]'))
+  view_Animations();
+}