From dd3c818b23bf55786503a0f164a48b4538deb7f3 Mon Sep 17 00:00:00 2001
From: Jitendra Nirnejak <jeetnirnejak@gmail.com>
Date: Mon, 13 May 2024 03:01:05 +0530
Subject: [PATCH] Animations integrated

---
 tailwind.config.ts  | 31 +++++++++++++++++++++++++++++++
 utils/animations.ts | 26 +++++++++++++-------------
 2 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/tailwind.config.ts b/tailwind.config.ts
index d4bbe64..81a188f 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -25,6 +25,22 @@ const usedColors = [
   "rose",
 ]
 
+const animationClasses = [
+  "animate-shake",
+  "animate-swing",
+  "animate-bounce",
+  "animate-scale",
+  "animate-rise",
+  "animate-slideUp",
+  "animate-slideDown",
+  "animate-slideLeft",
+  "animate-slideRight",
+  "animate-slideDownAndFade",
+  "animate-slideLeftAndFade",
+  "animate-slideUpAndFade",
+  "animate-slideRightAndFade",
+]
+
 const config: Config = {
   content: [
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
@@ -32,6 +48,7 @@ const config: Config = {
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   safelist: [
+    ...animationClasses,
     ...usedColors.map((c) => `text-${c}-50`),
     ...usedColors.map((c) => `text-${c}-100`),
     ...usedColors.map((c) => `text-${c}-200`),
@@ -102,6 +119,19 @@ const config: Config = {
           from: { transform: "translate(-50%, -40%) scale(0.95)" },
           to: { transform: "translate(-50%, -50%) scale(1)" },
         },
+        shake: {
+          "0%": { transform: "translate(1px, 1px) rotate(0deg)" },
+          "10%": { transform: "translate(-1px, -2px) rotate(-1deg)" },
+          "20%": { transform: "translate(-3px, 0px) rotate(1deg)" },
+          "30%": { transform: "translate(3px, 2px) rotate(0deg)" },
+          "40%": { transform: "translate(1px, -1px) rotate(1deg)" },
+          "50%": { transform: "translate(-1px, 2px) rotate(-1deg)" },
+          "60%": { transform: "translate(-3px, 1px) rotate(0deg)" },
+          "70%": { transform: "translate(3px, 1px) rotate(-1deg)" },
+          "80%": { transform: "translate(-1px, -1px) rotate(1deg)" },
+          "90%": { transform: "translate(1px, 2px) rotate(0deg)" },
+          "100%": { transform: "translate(1px, -2px) rotate(-1deg)" },
+        },
       },
       animation: {
         slideDownAndFade:
@@ -118,6 +148,7 @@ const config: Config = {
         swing: "swing 1s infinite ease-in-out alternate",
         scale: "scale 150ms cubic-bezier(0.4, 0, 0.2, 1)",
         rise: "rise 150ms cubic-bezier(0.4, 0, 0.2, 1)",
+        shake: "shake 150ms cubic-bezier(0.4, 0, 0.2, 1)",
       },
     },
     fontFamily: {
diff --git a/utils/animations.ts b/utils/animations.ts
index 68a7469..d71660f 100644
--- a/utils/animations.ts
+++ b/utils/animations.ts
@@ -1,54 +1,54 @@
 export const animations = [
   {
     title: "Shake",
-    animationClass: "animated-shake",
+    animationClass: "animate-shake",
   },
   {
     title: "Swing",
-    animationClass: "animated",
+    animationClass: "animate-swing",
   },
   {
     title: "Bounce",
-    animationClass: "animated",
+    animationClass: "animate-bounce",
   },
   {
     title: "Scale",
-    animationClass: "animated",
+    animationClass: "animate-scale",
   },
   {
     title: "Rise",
-    animationClass: "animated",
+    animationClass: "animate-rise",
   },
   {
     title: "Slide Up",
-    animationClass: "animated",
+    animationClass: "animate-slideUp",
   },
   {
     title: "Slide Down",
-    animationClass: "animated",
+    animationClass: "animate-slideDown",
   },
   {
     title: "Slide Left",
-    animationClass: "animated",
+    animationClass: "animate-slideLeft",
   },
   {
     title: "Slide Right",
-    animationClass: "animated",
+    animationClass: "animate-slideRight",
   },
   {
     title: "Slide Down and Fade",
-    animationClass: "animated",
+    animationClass: "animate-slideDownAndFade",
   },
   {
     title: "Slide Left and Fade",
-    animationClass: "animated",
+    animationClass: "animate-slideLeftAndFade",
   },
   {
     title: "Slide Up and Fade",
-    animationClass: "animated",
+    animationClass: "animate-slideUpAndFade",
   },
   {
     title: "Slide Right and Fade",
-    animationClass: "animated",
+    animationClass: "animate-slideRightAndFade",
   },
 ]