Added transition to modal open

src/components/Modal.js

@@ -2,6 +2,8 @@ import React from "react";
 import Modal from "react-modal";
 import { useThemeUI, Close } from "theme-ui";
 
+import { useSpring, animated, config } from "react-spring";
+
 function StyledModal({
   isOpen,
   onRequestClose,
@@ -12,6 +14,12 @@ function StyledModal({
 }) {
   const { theme } = useThemeUI();
 
+  const openAnimation = useSpring({
+    opacity: isOpen ? 1 : 0,
+    transform: isOpen ? "scale(1)" : "scale(0.99)",
+    config: config.default,
+  });
+
   return (
     <Modal
       isOpen={isOpen}
@@ -31,6 +39,11 @@ function StyledModal({
           ...style,
         },
       }}
+      contentElement={(props, content) => (
+        <animated.div {...props} style={{ ...props.style, ...openAnimation }}>
+          {content}
+        </animated.div>
+      )}
       {...props}
     >
       {children}

src/components/tile/TilesOverlay.js

@@ -13,7 +13,7 @@ function TilesOverlay({ children }) {
 
   const openAnimation = useSpring({
     opacity: openGroupId ? 1 : 0,
-    transform: openGroupId ? "scale(1)" : "scale(0.95)",
+    transform: openGroupId ? "scale(1)" : "scale(0.99)",
     config: config.gentle,
   });