Animated about

src/lib/animations.ts

@@ -1,22 +1,102 @@
-import { Variant } from "framer-motion";
+import { Variants } from "framer-motion";
 
-type AnimationVariants = Record<string, Variant>;
+/**
+ * Container
+ */
+export const staggerContainer: Variants = {
+  hidden: {},
+  visible: {
+    transition: {
+      staggerChildren: 0.15,
+      delayChildren: 0.05,
+    },
+  },
+};
 
-export const fadeInUp: AnimationVariants = {
-  hidden: { opacity: 0, y: 30 },
+/**
+ * Basic entrances
+ */
+export const fadeInUp: Variants = {
+  hidden: { opacity: 0, y: 24 },
   visible: {
     opacity: 1,
     y: 0,
+    transition: {
+      duration: 0.6,
+      ease: [0.22, 1, 0.36, 1], // premium easeOut
+    },
+  },
+};
+
+export const fadeInDown: Variants = {
+  hidden: { opacity: 0, y: -24 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.6,
+      ease: [0.22, 1, 0.36, 1],
+    },
+  },
+};
+
+export const fadeIn: Variants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
     transition: { duration: 0.6, ease: "easeOut" },
   },
 };
 
-export const staggerContainer: AnimationVariants = {
-  hidden: { opacity: 0 },
+/**
+ * Cards
+ */
+export const cardReveal: Variants = {
+  hidden: { opacity: 0, y: 30, scale: 0.96 },
   visible: {
     opacity: 1,
+    y: 0,
+    scale: 1,
     transition: {
-      staggerChildren: 0.15,
+      duration: 0.5,
+      ease: [0.22, 1, 0.36, 1],
+    },
+  },
+};
+
+/**
+ * Timeline
+ */
+export const timelineItemLeft: Variants = {
+  hidden: { opacity: 0, x: -40 },
+  visible: {
+    opacity: 1,
+    x: 0,
+    transition: { duration: 0.5, ease: "easeOut" },
+  },
+};
+
+export const timelineItemRight: Variants = {
+  hidden: { opacity: 0, x: 40 },
+  visible: {
+    opacity: 1,
+    x: 0,
+    transition: { duration: 0.5, ease: "easeOut" },
+  },
+};
+
+/**
+ * Decorative / ambient
+ */
+export const slowFloat: Variants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    y: [0, -10, 0],
+    transition: {
+      duration: 6,
+      repeat: Infinity,
+      ease: "easeInOut",
     },
   },
 };