feat(Modal): better animation according to design

mondaycom · Oct 20, 2024 · 06b08cd · 06b08cd
1 parent b4c0e00
commit 06b08cd
Showing 1 changed file with 37 additions and 26 deletions.
diff --git a/packages/core/src/components/ModalNew/utils/animationVariants.ts b/packages/core/src/components/ModalNew/utils/animationVariants.ts
@@ -1,55 +1,62 @@
 import { Variants } from "framer-motion";
 import { RefObject } from "react";
 
-const easeInOut = [0, 0, 0.4, 1];
-
-const modalEnterTransition = {
-  duration: 0.15,
-  ease: easeInOut
-};
-
-const modalExitTransition = {
-  duration: 0.1,
-  ease: easeInOut
-};
-
 export const modalAnimationOverlayVariants: Variants = {
   enter: {
     opacity: 1,
-    transition: modalEnterTransition
+    transition: {
+      duration: 0.2,
+      ease: [0.0, 0.0, 0.4, 1.0]
+    }
   },
   exit: {
     opacity: 0,
-    transition: modalExitTransition
+    transition: {
+      duration: 0.15,
+      ease: [0.0, 0.0, 0.4, 1.0]
+    }
   }
 };
 
 export const modalAnimationCenterPopVariants: Variants = {
   enter: {
-    opacity: 1,
-    scale: 1,
+    opacity: [0, 1, 1],
+    scale: [0.65, 1, 1],
     x: "-50%",
     y: "-50%",
-    transition: modalEnterTransition
+    transition: {
+      duration: 0.15,
+      ease: [0.0, 0.0, 0.4, 1.0],
+      times: [0, 0.5, 1]
+    }
   },
   exit: {
-    opacity: 0,
-    scale: 0.65,
+    opacity: [1, 1, 0],
+    scale: [1, 1, 0.65],
     x: "-50%",
     y: "-50%",
-    transition: modalExitTransition
+    transition: {
+      duration: 0.1,
+      ease: [0.0, 0.0, 0.4, 1.0],
+      times: [0, 0.5, 1]
+    }
   }
 };
 
 export const modalAnimationAnchorPopVariants: Variants = {
   enter: {
-    opacity: 1,
-    scale: 1,
+    opacity: [0, 1, 1],
+    scale: [0.65, 0.65, 1],
     top: "50%",
     left: "50%",
     x: "-50%",
     y: "-50%",
-    transition: modalEnterTransition
+    transition: {
+      delay: 0.05,
+      duration: 0.2,
+      ease: [0.0, 0.0, 0.4, 1.0],
+      times: [0, 0.2, 1]
+    }
   },
   exit: (anchorElementRef: RefObject<HTMLElement>) => {
     const anchorRect = anchorElementRef.current.getBoundingClientRect();
@@ -60,13 +67,17 @@ export const modalAnimationAnchorPopVariants: Variants = {
     const y = `calc(-50% + ${anchorCenterY}px)`;
 
     return {
-      opacity: 0,
-      scale: 0.65,
+      opacity: [1, 1, 0],
+      scale: [1, 1, 0.75],
       top: 0,
       left: 0,
       x,
       y,
-      transition: modalExitTransition
+      transition: {
+        duration: 0.15,
+        ease: [0.6, 0.0, 1.0, 1.0],
+        times: [0, 0.33, 1]
+      }
     };
   }
 };