fix(Modal): animation enhancements

mondaycom · Dec 11, 2024 · b7230e7 · b7230e7
1 parent 0a99e83
commit b7230e7
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 16 deletions.
diff --git a/packages/core/src/components/Modal/Modal/Modal.module.scss b/packages/core/src/components/Modal/Modal/Modal.module.scss
@@ -2,7 +2,7 @@
   --monday-modal-z-index: 10000;
   position: fixed;
   inset: 0;
-  background-color: rgba(41, 47, 76, 0.7);
+  background-color: var(--color-surface);
   z-index: var(--monday-modal-z-index);
 }
 

diff --git a/packages/core/src/components/Modal/Modal/Modal.tsx b/packages/core/src/components/Modal/Modal/Modal.tsx
@@ -98,7 +98,7 @@ const Modal = forwardRef(
                   <motion.div
                     ref={overlayRef}
                     variants={modalAnimationOverlayVariants}
-                    initial={false}
+                    initial="initial"
                     animate="enter"
                     exit="exit"
                     data-testid={getTestId(ComponentDefaultTestId.MODAL_NEXT_OVERLAY, id)}

diff --git a/packages/core/src/components/Modal/utils/animationVariants.ts b/packages/core/src/components/Modal/utils/animationVariants.ts
@@ -2,26 +2,35 @@ import { Variants } from "framer-motion";
 import { RefObject } from "react";
 
 export const modalAnimationOverlayVariants: Variants = {
+  initial: {
+    opacity: 0
+  },
   enter: {
-    opacity: 1,
+    opacity: 0.7,
     transition: {
-      duration: 0.2,
+      duration: 0.1,
       ease: [0.0, 0.0, 0.4, 1.0]
     }
   },
   exit: {
     opacity: 0,
     transition: {
-      duration: 0.15,
-      ease: [0.0, 0.0, 0.4, 1.0]
+      duration: 0.1,
+      ease: [0.6, 0.0, 1.0, 1.0]
     }
   }
 };
 
 export const modalAnimationCenterPopVariants: Variants = {
+  initial: {
+    opacity: 1,
+    scale: 1,
+    x: "-50%",
+    y: "-50%"
+  },
   enter: {
     opacity: [0, 1, 1],
-    scale: [0.65, 1, 1],
+    scale: [0.8, 1, 1],
     x: "-50%",
     y: "-50%",
     transition: {
@@ -32,30 +41,46 @@ export const modalAnimationCenterPopVariants: Variants = {
   },
   exit: {
     opacity: [1, 1, 0],
-    scale: [1, 1, 0.65],
+    scale: [1, 1, 0.8],
     x: "-50%",
     y: "-50%",
     transition: {
       duration: 0.1,
-      ease: [0.0, 0.0, 0.4, 1.0],
+      ease: [0.6, 0.0, 1.0, 1.0],
       times: [0, 0.5, 1]
     }
   }
 };
 
 export const modalAnimationAnchorPopVariants: Variants = {
+  initial: (anchorElementRef: RefObject<HTMLElement>) => {
+    const anchorRect = anchorElementRef.current.getBoundingClientRect();
+    const anchorCenterX = anchorRect.left + anchorRect.width / 2;
+    const anchorCenterY = anchorRect.top + anchorRect.height / 2;
+
+    const x = `calc(-50% + ${anchorCenterX}px)`;
+    const y = `calc(-50% + ${anchorCenterY}px)`;
+
+    return {
+      opacity: 0,
+      scale: 0.8,
+      top: "50%",
+      left: "50%",
+      x,
+      y
+    };
+  },
   enter: {
-    opacity: [0, 1, 1],
-    scale: [0.65, 0.65, 1],
+    opacity: [0, 0, 1],
+    scale: [0.8, 0.8, 1],
     top: "50%",
     left: "50%",
     x: "-50%",
     y: "-50%",
     transition: {
-      delay: 0.05,
       duration: 0.2,
       ease: [0.0, 0.0, 0.4, 1.0],
-      times: [0, 0.2, 1]
+      times: [0, 0.4, 1]
     }
   },
   exit: (anchorElementRef: RefObject<HTMLElement>) => {
@@ -67,16 +92,16 @@ export const modalAnimationAnchorPopVariants: Variants = {
     const y = `calc(-50% + ${anchorCenterY}px)`;
 
     return {
-      opacity: [1, 1, 0],
-      scale: [1, 1, 0.75],
+      opacity: [1, 0, 0],
+      scale: [1, 0.8, 0.8],
       top: 0,
       left: 0,
       x,
       y,
       transition: {
         duration: 0.15,
         ease: [0.6, 0.0, 1.0, 1.0],
-        times: [0, 0.33, 1]
+        times: [0, 0.6, 1]
       }
     };
   }