refactor(web/transitions): improve scale fade transition

overextended · Jan 2, 2023 · 7d9e76b · 7d9e76b
1 parent 9f1ae61
commit 7d9e76b
Showing 1 changed file with 3 additions and 4 deletions.
diff --git a/web/src/transitions/ScaleFade.tsx b/web/src/transitions/ScaleFade.tsx
@@ -3,13 +3,12 @@ import { AnimatePresence, motion } from 'framer-motion';
 const ScaleFade: React.FC<{ visible: boolean; children: React.ReactNode }> = ({ visible, children }) => {
   return (
     <>
-      <AnimatePresence initial={false}>
+      <AnimatePresence>
         {visible && (
           <motion.div
             initial={{ opacity: 0, scale: 0.95 }}
-            animate={{ opacity: 1, scale: 1 }}
-            exit={{ opacity: 0, scale: 0.95 }}
-            transition={{ duration: 0.1 }}
+            animate={{ opacity: 1, scale: 1, transition: { duration: 0.2, ease: [0.4, 0, 1, 1] } }}
+            exit={{ opacity: 0, scale: 0.95, transition: { duration: 0.1, ease: [0, 0, 0.2, 1] } }}
           >
             {children}
           </motion.div>