From e84113a73f7dee99ac9b53fc9690e7acaa4b3f23 Mon Sep 17 00:00:00 2001 From: FordoA455 Date: Sat, 11 Jan 2025 15:17:05 -0800 Subject: [PATCH 1/4] Adding fade in animation to info boxes Signed-off-by: FordoA455 --- package-lock.json | 40 ++++++ package.json | 1 + src/components/InfoPage.tsx | 260 +++++++++++++++++++++--------------- src/components/Title.tsx | 2 +- 4 files changed, 191 insertions(+), 112 deletions(-) diff --git a/package-lock.json b/package-lock.json index 15480d6..cdcaa65 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,7 @@ "@types/node": "^16.18.113", "@types/react": "^18.3.11", "@types/react-dom": "^18.3.1", + "framer-motion": "^11.17.0", "react": "^18.3.1", "react-dom": "^18.3.1", "react-multi-carousel": "^2.8.5", @@ -9434,6 +9435,32 @@ "url": "https://github.com/sponsors/rawify" } }, + "node_modules/framer-motion": { + "version": "11.17.0", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.17.0.tgz", + "integrity": "sha512-uTNLH9JPMD3ad14WBt3KYRTR+If4tGPLgKTKTIIPaEBMkvazs6EkWNcmCh65qA/tyinOqIbQiuCorXX0qQsNoQ==", + "dependencies": { + "motion-dom": "^11.16.4", + "motion-utils": "^11.16.0", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/fresh": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", @@ -12488,6 +12515,19 @@ "mkdirp": "bin/cmd.js" } }, + "node_modules/motion-dom": { + "version": "11.16.4", + "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.16.4.tgz", + "integrity": "sha512-2wuCie206pCiP2K23uvwJeci4pMFfyQKpWI0Vy6HrCTDzDCer4TsYtT7IVnuGbDeoIV37UuZiUr6SZMHEc1Vww==", + "dependencies": { + "motion-utils": "^11.16.0" + } + }, + "node_modules/motion-utils": { + "version": "11.16.0", + "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.16.0.tgz", + "integrity": "sha512-ngdWPjg31rD4WGXFi0eZ00DQQqKKu04QExyv/ymlC+3k+WIgYVFbt6gS5JsFPbJODTF/r8XiE/X+SsoT9c0ocw==" + }, "node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", diff --git a/package.json b/package.json index 052e2ae..6ea4a8c 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "@types/node": "^16.18.113", "@types/react": "^18.3.11", "@types/react-dom": "^18.3.1", + "framer-motion": "^11.17.0", "react": "^18.3.1", "react-dom": "^18.3.1", "react-multi-carousel": "^2.8.5", diff --git a/src/components/InfoPage.tsx b/src/components/InfoPage.tsx index cfe4bae..98be6f9 100644 --- a/src/components/InfoPage.tsx +++ b/src/components/InfoPage.tsx @@ -3,6 +3,8 @@ import Typography from '@mui/joy/Typography'; import Card from '@mui/joy/Card'; import CardContent from '@mui/joy/CardContent'; import React, {useState, useEffect} from 'react'; +import { motion } from 'framer-motion'; +import { Opacity } from "@mui/icons-material"; export default function InfoPage() { const [isMobile, setIsMobile] = useState(false); @@ -22,121 +24,157 @@ export default function InfoPage() { return (
{!isMobile && (
- - - Where Boundaries Fade and Ideas Flourish - MVHacks is proud to give a platform for aspiring tech enthusiasts to grow and learn by making unique projects that progress society. - - - - - Workshops and advice to help you grow - With specialized judges that are currently in the tech industry, at MVHacks you'll receive the best feedback to help you improve. - - - - - Real world collaboration and innovation - The MVHacks schedule is currently in development, but expect team-building exercises, workshops, and challenges! - - + + + Where Boundaries Fade and Ideas Flourish + MVHacks is proud to give a platform for aspiring tech enthusiasts to grow and learn by making unique projects that progress society. + + + + + + + Workshops and advice to help you grow + With specialized judges that are currently in the tech industry, at MVHacks you'll receive the best feedback to help you improve. + + + + + + + Real world collaboration and innovation + The MVHacks schedule is currently in development, but expect team-building exercises, workshops, and challenges! + + +
)} {isMobile && (
- - - Where Boundaries Fade and Ideas Flourish - MVHacks is proud to give a platform for aspiring tech enthusiasts to grow and learn by making unique projects that progress society. - - - - - Workshops and advice to help you grow - With specialized judges that are currently in the tech industry, at MVHacks you'll receive the best feedback to help you improve. - - - + + + Where Boundaries Fade and Ideas Flourish + MVHacks is proud to give a platform for aspiring tech enthusiasts to grow and learn by making unique projects that progress society. + + + + + + + Workshops and advice to help you grow + With specialized judges that are currently in the tech industry, at MVHacks you'll receive the best feedback to help you improve. + + + + - - Real world collaboration and innovation - The MVHacks schedule is currently in development, but expect team-building exercises, workshops, and challenges! - - + + + Real world collaboration and innovation + The MVHacks schedule is currently in development, but expect team-building exercises, workshops, and challenges! + + +
)}
); diff --git a/src/components/Title.tsx b/src/components/Title.tsx index fbc0b76..9225b40 100644 --- a/src/components/Title.tsx +++ b/src/components/Title.tsx @@ -49,7 +49,7 @@ export default function Title() { - + Each year, high school hackers from across the Bay Area come together at MVHacks to create cool projects, learn from experts, and participate in 12 hours of hacking! Hackers of all skill levels are welcome to compete, individually or as a group. The date and time of this event are not finalized yet, but will be in Spring 2025 in the Bay Area. *You can now sign up to be alerted when more details about MVHacks 8.0 are released by clicking the alert me button.{' '} From 11312272004c2edca057c869ab3ae06d50a9104d Mon Sep 17 00:00:00 2001 From: FordoA455 Date: Sat, 11 Jan 2025 22:21:37 -0800 Subject: [PATCH 2/4] Slide in from bottom Signed-off-by: FordoA455 --- src/components/InfoPage.tsx | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/components/InfoPage.tsx b/src/components/InfoPage.tsx index 98be6f9..4325ee5 100644 --- a/src/components/InfoPage.tsx +++ b/src/components/InfoPage.tsx @@ -25,8 +25,8 @@ export default function InfoPage() {
{!isMobile && (
)} {isMobile && (
Date: Sat, 11 Jan 2025 22:27:30 -0800 Subject: [PATCH 3/4] Remove unecessary import Signed-off-by: FordoA455 --- src/components/InfoPage.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/InfoPage.tsx b/src/components/InfoPage.tsx index 4325ee5..96b5f46 100644 --- a/src/components/InfoPage.tsx +++ b/src/components/InfoPage.tsx @@ -4,7 +4,6 @@ import Card from '@mui/joy/Card'; import CardContent from '@mui/joy/CardContent'; import React, {useState, useEffect} from 'react'; import { motion } from 'framer-motion'; -import { Opacity } from "@mui/icons-material"; export default function InfoPage() { const [isMobile, setIsMobile] = useState(false); From 7877ba9c6ac912b1ece7a670706db901cbc60652 Mon Sep 17 00:00:00 2001 From: FordoA455 Date: Sat, 11 Jan 2025 23:15:50 -0800 Subject: [PATCH 4/4] Animating boxes only once Signed-off-by: FordoA455 --- src/components/InfoPage.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/InfoPage.tsx b/src/components/InfoPage.tsx index 96b5f46..92df173 100644 --- a/src/components/InfoPage.tsx +++ b/src/components/InfoPage.tsx @@ -26,7 +26,7 @@ export default function InfoPage() {