new

frontend/src/animation.js

@@ -1,35 +1,53 @@
+
+// Framer Motion Animation Variants
+
 export const fadeInUp = {
-  initial: { opacity: 0, y: 30 },
-  animate: { opacity: 1, y: 0, transition: { duration: 0.6, ease: "easeOut" } },
-  exit: { opacity: 0, y: 20, transition: { duration: 0.4 } }
+  hidden: { opacity: 0, y: 30 },
+  visible: (custom = 0) => ({
+    opacity: 1,
+    y: 0,
+    transition: {
+      delay: custom * 0.08,
+      duration: 0.6,
+      ease: [0.22, 1, 0.36, 1], // Custom easing
+    },
+  }),
 };
 
 export const staggerContainer = {
   hidden: { opacity: 0 },
-  show: {
+  visible: {
     opacity: 1,
     transition: {
-      staggerChildren: 0.08
-    }
-  }
+      staggerChildren: 0.1,
+    },
+  },
 };
 
-export const cardHover = {
+export const hoverScale = {
   hover: {
     scale: 1.03,
-    boxShadow: "0 20px 40px rgba(0,0,0,0.4)",
-    y: -5,
-    transition: { duration: 0.3, ease: "easeOut" }
-  }
-};
-
-export const buttonClick = {
-  tap: { scale: 0.95 }
+    boxShadow: "0px 10px 20px rgba(0, 0, 0, 0.2)",
+    transition: { duration: 0.3 },
+  },
 };
 
 export const pageTransition = {
-  initial: { opacity: 0 },
-  animate: { opacity: 1 },
-  exit: { opacity: 0 },
-  transition: { duration: 0.4 }
+  initial: { opacity: 0, x: 20 },
+  animate: { opacity: 1, x: 0 },
+  exit: { opacity: 0, x: -20 },
+  transition: { duration: 0.3 },
+};
+
+export const buttonTap = {
+  scale: 0.95,
+};
+
+export const imageFadeIn = {
+  hidden: { opacity: 0, scale: 1.1 },
+  visible: { 
+    opacity: 1, 
+    scale: 1,
+    transition: { duration: 0.5 }
+  },
 };