1.1

JackCrawfordRobertson · Nov 1, 2023 · 4a4a7f2 · 4a4a7f2
1 parent 6306f9f
commit 4a4a7f2
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 27 deletions.
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "@mui/icons-material": "^5.14.14",
     "@mui/material": "^5.14.14",
     "flubber": "^0.4.2",
+    "framer-motion": "^10.16.4",
     "gatsby": "^5.12.4",
     "gatsby-plugin-google-gtag": "^5.12.1",
     "gatsby-plugin-image": "^3.12.1",

diff --git a/src/pages/Maps/ZoomButton.js b/src/pages/Maps/ZoomButton.js
@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { motion } from "framer-motion";
 
 const ZoomButton = ({ onZoom }) => {
     const [visible, setVisible] = useState(true);
@@ -22,7 +23,12 @@ const ZoomButton = ({ onZoom }) => {
 
     return (
         visible ? (
-            <div
+
+            <motion.div
+                initial={{ opacity: 1, backgroundColor: 'rgba(52,152,219,1)' }}
+                animate={{ opacity: 1, backgroundColor: 'rgba(52,152,219,0.8)' }}
+                transition={{ duration: 2, ease: "easeInOut" }}  // Adjust the duration as needed
+
                 style={{
                     position: 'absolute',
                     top: 0,
@@ -33,40 +39,44 @@ const ZoomButton = ({ onZoom }) => {
                     flexDirection: 'column',
                     justifyContent: 'center',
                     alignItems: 'center',
-                    opacity: 1,
-                    transition: 'opacity 0.5s ease-in-out',
                     backgroundColor: 'rgba(52,152,219,0.8)',
                     zIndex: 100,
-                    borderRadius: '15px',
                     boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
+                    transition: 'opacity 0.5s ease-in-out',  // Adjusted transition for opacity
                 }}
             >
-                <div style={{ textAlign: 'center', marginBottom: '20px' }}>
-                    <h1 style={{ fontSize: '48px', color: '#fff' }}>Aqueous</h1>  
+                <motion.div
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.5, ease: "easeInOut", delay: 0.25 }}
+                    style={{ textAlign: 'center', marginBottom: '20px' }}
+                >
+                    <h1 style={{ fontSize: '48px', color: '#fff' }}>Aqueous</h1>
                     <p style={{ color: '#fff' }}>Evolving understanding and scale through information</p>
-                </div>
-                <button 
-                    onClick={handleZoomClick} 
-                        style={{ 
-                            backgroundColor: '#fff', 
-                            padding: '15px 30px',  
-                            border: 'none', 
-                            borderRadius: '5px', 
-                            cursor: 'pointer',
-                            boxShadow: '0 2px 5px rgba(0,0,0,0.15)',
-                            fontSize: '16px',
-                            fontWeight: 'bold',
-                            transition: 'transform 0.3s ease-in-out',  // Transition for smooth scaling effect
-                        }}
-                        onMouseOver={(e) => e.currentTarget.style.transform = 'scale(1.05)'}  // Scale up on hover
-                        onMouseOut={(e) => e.currentTarget.style.transform = 'scale(1)'}  // Reset scale on mouse out
+                </motion.div>
+                <motion.button
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.5, ease: "easeInOut", delay: 2 }}
+                    onClick={handleZoomClick}
+                    style={{
+                        backgroundColor: '#fff',
+                        padding: '15px 30px',
+                        border: 'none',
+                        borderRadius: '5px',
+                        cursor: 'pointer',
+                        boxShadow: '0 2px 5px rgba(0,0,0,0.15)',
+                        fontSize: '16px',
+                        fontWeight: 'bold',
+                    }}
+                    onMouseOver={(e) => e.currentTarget.style.transform = 'scale(1.05)'}
+                    onMouseOut={(e) => e.currentTarget.style.transform = 'scale(1)'}
                     >
-                        Zoom to Focus
-                        </button>
-            </div>
+                    Zoom to Focus
+                </motion.button>
+            </motion.div>
         ) : null
     );
 };
 
-export default ZoomButton;
-
+export default ZoomButton;
diff --git a/src/pages/Maps/animations.css b/src/pages/Maps/animations.css
@@ -0,0 +1,4 @@
+@keyframes fadeInSlideUp {
+    0% { opacity: 0; transform: translateY(20px); }
+    100% { opacity: 1; transform: translateY(0); }
+}
diff --git a/yarn.lock b/yarn.lock
@@ -1116,13 +1116,25 @@
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43"
   integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==
 
+"@emotion/is-prop-valid@^0.8.2":
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
+  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
+  dependencies:
+    "@emotion/memoize" "0.7.4"
+
 "@emotion/is-prop-valid@^1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz#23116cf1ed18bfeac910ec6436561ecb1a3885cc"
   integrity sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==
   dependencies:
     "@emotion/memoize" "^0.8.1"
 
+"@emotion/[email protected]":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
+  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+
 "@emotion/memoize@^0.8.1":
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17"
@@ -5458,6 +5470,15 @@ fraction.js@^4.2.0:
   resolved "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz"
   integrity sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==
 
+framer-motion@^10.16.4:
+  version "10.16.4"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-10.16.4.tgz#30279ef5499b8d85db3a298ee25c83429933e9f8"
+  integrity sha512-p9V9nGomS3m6/CALXqv6nFGMuFOxbWsmaOrdmhyQimMIlLl3LC7h7l86wge/Js/8cRu5ktutS/zlzgR7eBOtFA==
+  dependencies:
+    tslib "^2.4.0"
+  optionalDependencies:
+    "@emotion/is-prop-valid" "^0.8.2"
+
 [email protected]:
   version "0.5.2"
   resolved "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz"