sms

frontend/src/animation.js

@@ -0,0 +1,53 @@
+
+// Framer Motion Animation Variants
+
+export const fadeInUp = {
+  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 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.1,
+    },
+  },
+};
+
+export const hoverScale = {
+  hover: {
+    scale: 1.03,
+    boxShadow: "0px 10px 20px rgba(0, 0, 0, 0.2)",
+    transition: { duration: 0.3 },
+  },
+};
+
+export const pageTransition = {
+  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 }
+  },
+};