From e84113a73f7dee99ac9b53fc9690e7acaa4b3f23 Mon Sep 17 00:00:00 2001 From: FordoA455 <milobylin@gmail.com> Date: Sat, 11 Jan 2025 15:17:05 -0800 Subject: [PATCH 1/4] Adding fade in animation to info boxes Signed-off-by: FordoA455 <milobylin@gmail.com> --- 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<Boolean>(false); @@ -22,121 +24,157 @@ export default function InfoPage() { return ( <div> {!isMobile && (<div style={{marginTop: "100px"}}> - <Card - orientation="horizontal" - size="md" - variant="outlined" - sx={{ - "--Card-padding": "16px", - "--Card-radius": "26px", - display: "flex", - flexDirection: "column", - width: "40%", - marginLeft: "10%", - backgroundColor: "black" - }}> - <CardContent sx={{alignItems: "center"}}> - <Typography textColor={"#c8acd4"} level="h2">Where Boundaries Fade and Ideas Flourish</Typography> - <Typography textColor={"common.white"}>MVHacks is proud to give a platform for aspiring tech enthusiasts to grow and learn by making unique projects that progress society.</Typography> - </CardContent> - </Card> - <Card - orientation="horizontal" - size="md" - variant="outlined" - sx={{ - "--Card-padding": "16px", - "--Card-radius": "26px", - display: "flex", - flexDirection: "column", - marginLeft: "48%", - marginRight: "10%", - marginTop: "100px", - backgroundColor: "black" - }}> - <CardContent sx={{alignItems: "center"}}> - <Typography textColor={"#c8acd4"} level="h2">Workshops and advice to help you grow</Typography> - <Typography textColor={"common.white"}>With specialized judges that are currently in the tech industry, at MVHacks you'll receive the best feedback to help you improve.</Typography> - </CardContent> - </Card> - <Card - orientation="horizontal" - size="md" - variant="outlined" - sx={{ - "--Card-padding": "16px", - "--Card-radius": "26px", - display: "flex", - flexDirection: "column", - marginTop: "100px", - marginLeft: "10%", - marginBottom: "5%", - width: "40%", - backgroundColor: "black" - }} + <motion.div + initial={{ opacity: 0}} + whileInView={{ opacity: 1, transition: { delay: 0.2, duration: 0.5}}} + viewport={{ once: false, amount: 1 }} > - <CardContent sx={{alignItems: "center"}}> - <Typography textColor={"#c8acd4"} level="h2">Real world collaboration and innovation</Typography> - <Typography textColor={"common.white"}>The MVHacks schedule is currently in development, but expect team-building exercises, workshops, and challenges!</Typography> - </CardContent> - </Card> + <Card + orientation="horizontal" + size="md" + variant="outlined" + sx={{ + "--Card-padding": "16px", + "--Card-radius": "26px", + display: "flex", + flexDirection: "column", + width: "40%", + marginLeft: "10%", + backgroundColor: "black" + }}> + <CardContent sx={{alignItems: "center"}}> + <Typography textColor={"#c8acd4"} level="h2">Where Boundaries Fade and Ideas Flourish</Typography> + <Typography textColor={"common.white"}>MVHacks is proud to give a platform for aspiring tech enthusiasts to grow and learn by making unique projects that progress society.</Typography> + </CardContent> + </Card> + </motion.div> + <motion.div + initial={{ opacity: 0}} + whileInView={{ opacity: 1, transition: { delay: 0.2, duration: 0.5}}} + viewport={{ once: false, amount: 1 }} + > + <Card + orientation="horizontal" + size="md" + variant="outlined" + sx={{ + "--Card-padding": "16px", + "--Card-radius": "26px", + display: "flex", + flexDirection: "column", + marginLeft: "48%", + marginRight: "10%", + marginTop: "100px", + backgroundColor: "black" + }}> + <CardContent sx={{alignItems: "center"}}> + <Typography textColor={"#c8acd4"} level="h2">Workshops and advice to help you grow</Typography> + <Typography textColor={"common.white"}>With specialized judges that are currently in the tech industry, at MVHacks you'll receive the best feedback to help you improve.</Typography> + </CardContent> + </Card> + </motion.div> + <motion.div + initial={{ opacity: 0}} + whileInView={{ opacity: 1, transition: { delay: 0.2, duration: 0.5}}} + viewport={{ once: false, amount: 1 }} + > + <Card + orientation="horizontal" + size="md" + variant="outlined" + sx={{ + "--Card-padding": "16px", + "--Card-radius": "26px", + display: "flex", + flexDirection: "column", + marginTop: "100px", + marginLeft: "10%", + marginBottom: "5%", + width: "40%", + backgroundColor: "black" + }} + > + <CardContent sx={{alignItems: "center"}}> + <Typography textColor={"#c8acd4"} level="h2">Real world collaboration and innovation</Typography> + <Typography textColor={"common.white"}>The MVHacks schedule is currently in development, but expect team-building exercises, workshops, and challenges!</Typography> + </CardContent> + </Card> + </motion.div> </div>)} {isMobile && (<div style={{marginTop: "100px"}}> - <Card - orientation="horizontal" - size="md" - variant="outlined" - sx={{ - "--Card-padding": "16px", - "--Card-radius": "26px", - display: "flex", - margin: "0 10%", - flexDirection: "column", - backgroundColor: "black", - padding: "5%" - }}> - <CardContent sx={{alignItems: "center"}}> - <Typography textColor={"#c8acd4"} level="h2">Where Boundaries Fade and Ideas Flourish</Typography> - <Typography textColor={"common.white"} level="body-md">MVHacks is proud to give a platform for aspiring tech enthusiasts to grow and learn by making unique projects that progress society.</Typography> - </CardContent> - </Card> - <Card - orientation="horizontal" - size="md" - variant="outlined" - sx={{ - "--Card-padding": "16px", - "--Card-radius": "26px", - display: "flex", - flexDirection: "column", - margin: "10% 10%" , - backgroundColor: "black", - padding: "5%" - }}> - <CardContent sx={{alignItems: "center"}}> - <Typography textColor={"#c8acd4"} level="h2">Workshops and advice to help you grow</Typography> - <Typography textColor={"common.white"} level="body-md">With specialized judges that are currently in the tech industry, at MVHacks you'll receive the best feedback to help you improve.</Typography> - </CardContent> - </Card> - <Card - orientation="horizontal" - size="md" - variant="outlined" - sx={{ - "--Card-padding": "16px", - "--Card-radius": "26px", - display: "flex", - flexDirection: "column", - margin: "10% 10%" , - backgroundColor: "black", - padding: "5%" - }} + <motion.div + initial={{ opacity: 0}} + whileInView={{ opacity: 1, transition: { delay: 0.2, duration: 0.4}}} + viewport={{ once: false, amount: 1 }} + > + <Card + orientation="horizontal" + size="md" + variant="outlined" + sx={{ + "--Card-padding": "16px", + "--Card-radius": "26px", + display: "flex", + margin: "0 10%", + flexDirection: "column", + backgroundColor: "black", + padding: "5%" + }}> + <CardContent sx={{alignItems: "center"}}> + <Typography textColor={"#c8acd4"} level="h2">Where Boundaries Fade and Ideas Flourish</Typography> + <Typography textColor={"common.white"} level="body-md">MVHacks is proud to give a platform for aspiring tech enthusiasts to grow and learn by making unique projects that progress society.</Typography> + </CardContent> + </Card> + </motion.div> + <motion.div + initial={{ opacity: 0}} + whileInView={{ opacity: 1, transition: { delay: 0.2, duration: 0.4}}} + viewport={{ once: false, amount: 1 }} + > + <Card + orientation="horizontal" + size="md" + variant="outlined" + sx={{ + "--Card-padding": "16px", + "--Card-radius": "26px", + display: "flex", + flexDirection: "column", + margin: "10% 10%" , + backgroundColor: "black", + padding: "5%" + }}> + <CardContent sx={{alignItems: "center"}}> + <Typography textColor={"#c8acd4"} level="h2">Workshops and advice to help you grow</Typography> + <Typography textColor={"common.white"} level="body-md">With specialized judges that are currently in the tech industry, at MVHacks you'll receive the best feedback to help you improve.</Typography> + </CardContent> + </Card> + </motion.div> + <motion.div + initial={{ opacity: 0}} + whileInView={{ opacity: 1, transition: { delay: 0.2, duration: 0.4}}} + viewport={{ once: false, amount: 1 }} > - <CardContent sx={{alignItems: "center"}}> - <Typography textColor={"#c8acd4"} level="h2">Real world collaboration and innovation</Typography> - <Typography textColor={"common.white"} level="body-md">The MVHacks schedule is currently in development, but expect team-building exercises, workshops, and challenges!</Typography> - </CardContent> - </Card> + <Card + orientation="horizontal" + size="md" + variant="outlined" + sx={{ + "--Card-padding": "16px", + "--Card-radius": "26px", + display: "flex", + flexDirection: "column", + margin: "10% 10%" , + backgroundColor: "black", + padding: "5%" + }} + > + <CardContent sx={{alignItems: "center"}}> + <Typography textColor={"#c8acd4"} level="h2">Real world collaboration and innovation</Typography> + <Typography textColor={"common.white"} level="body-md">The MVHacks schedule is currently in development, but expect team-building exercises, workshops, and challenges!</Typography> + </CardContent> + </Card> + </motion.div> </div>)} </div> ); 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() { </Typography> </Box> </Typography> - <Typography level="body-lg" variant="plain" textColor="common.white" sx={{maxWidth: "500px", marginLeft: "10%", marginBottom:"20px"}}> + <Typography level="body-lg" variant="plain" textColor="common.white" sx={{maxWidth: "500px", marginLeft: "10%", marginBottom:"20px", marginTop: "10px"}}> 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. <Typography level="title-lg" variant="plain" sx={{color: "rgb(150,122,162)"}}>*You can now sign up to be alerted when more details about MVHacks 8.0 are released by clicking the alert me button.</Typography>{' '} From 11312272004c2edca057c869ab3ae06d50a9104d Mon Sep 17 00:00:00 2001 From: FordoA455 <milobylin@gmail.com> Date: Sat, 11 Jan 2025 22:21:37 -0800 Subject: [PATCH 2/4] Slide in from bottom Signed-off-by: FordoA455 <milobylin@gmail.com> --- 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() { <div> {!isMobile && (<div style={{marginTop: "100px"}}> <motion.div - initial={{ opacity: 0}} - whileInView={{ opacity: 1, transition: { delay: 0.2, duration: 0.5}}} + initial={{ opacity: 0, y: 50}} + whileInView={{ opacity: 1, y: 0, transition: { delay: 0.2, duration: 0.5}}} viewport={{ once: false, amount: 1 }} > <Card @@ -49,8 +49,8 @@ export default function InfoPage() { </Card> </motion.div> <motion.div - initial={{ opacity: 0}} - whileInView={{ opacity: 1, transition: { delay: 0.2, duration: 0.5}}} + initial={{ opacity: 0, y: 50}} + whileInView={{ opacity: 1, y: 0, transition: { delay: 0.2, duration: 0.5}}} viewport={{ once: false, amount: 1 }} > <Card @@ -74,8 +74,8 @@ export default function InfoPage() { </Card> </motion.div> <motion.div - initial={{ opacity: 0}} - whileInView={{ opacity: 1, transition: { delay: 0.2, duration: 0.5}}} + initial={{ opacity: 0, y: 50}} + whileInView={{ opacity: 1, y: 0, transition: { delay: 0.2, duration: 0.5}}} viewport={{ once: false, amount: 1 }} > <Card @@ -103,8 +103,8 @@ export default function InfoPage() { </div>)} {isMobile && (<div style={{marginTop: "100px"}}> <motion.div - initial={{ opacity: 0}} - whileInView={{ opacity: 1, transition: { delay: 0.2, duration: 0.4}}} + initial={{ opacity: 0, y: 50}} + whileInView={{ opacity: 1, y: 0, transition: { delay: 0.2, duration: 0.5}}} viewport={{ once: false, amount: 1 }} > <Card @@ -127,8 +127,8 @@ export default function InfoPage() { </Card> </motion.div> <motion.div - initial={{ opacity: 0}} - whileInView={{ opacity: 1, transition: { delay: 0.2, duration: 0.4}}} + initial={{ opacity: 0, y: 50}} + whileInView={{ opacity: 1, y: 0, transition: { delay: 0.2, duration: 0.5}}} viewport={{ once: false, amount: 1 }} > <Card @@ -151,8 +151,8 @@ export default function InfoPage() { </Card> </motion.div> <motion.div - initial={{ opacity: 0}} - whileInView={{ opacity: 1, transition: { delay: 0.2, duration: 0.4}}} + initial={{ opacity: 0, y: 50}} + whileInView={{ opacity: 1, y: 0, transition: { delay: 0.2, duration: 0.5}}} viewport={{ once: false, amount: 1 }} > <Card From 82dde94b6e14b26b86e1aa6b66bb1538da8e4b20 Mon Sep 17 00:00:00 2001 From: FordoA455 <milobylin@gmail.com> Date: Sat, 11 Jan 2025 22:27:30 -0800 Subject: [PATCH 3/4] Remove unecessary import Signed-off-by: FordoA455 <milobylin@gmail.com> --- 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<Boolean>(false); From 7877ba9c6ac912b1ece7a670706db901cbc60652 Mon Sep 17 00:00:00 2001 From: FordoA455 <milobylin@gmail.com> Date: Sat, 11 Jan 2025 23:15:50 -0800 Subject: [PATCH 4/4] Animating boxes only once Signed-off-by: FordoA455 <milobylin@gmail.com> --- 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() { <motion.div initial={{ opacity: 0, y: 50}} whileInView={{ opacity: 1, y: 0, transition: { delay: 0.2, duration: 0.5}}} - viewport={{ once: false, amount: 1 }} + viewport={{ once: true, amount: 1 }} > <Card orientation="horizontal" @@ -50,7 +50,7 @@ export default function InfoPage() { <motion.div initial={{ opacity: 0, y: 50}} whileInView={{ opacity: 1, y: 0, transition: { delay: 0.2, duration: 0.5}}} - viewport={{ once: false, amount: 1 }} + viewport={{ once: true, amount: 1 }} > <Card orientation="horizontal" @@ -75,7 +75,7 @@ export default function InfoPage() { <motion.div initial={{ opacity: 0, y: 50}} whileInView={{ opacity: 1, y: 0, transition: { delay: 0.2, duration: 0.5}}} - viewport={{ once: false, amount: 1 }} + viewport={{ once: true, amount: 1 }} > <Card orientation="horizontal" @@ -104,7 +104,7 @@ export default function InfoPage() { <motion.div initial={{ opacity: 0, y: 50}} whileInView={{ opacity: 1, y: 0, transition: { delay: 0.2, duration: 0.5}}} - viewport={{ once: false, amount: 1 }} + viewport={{ once: true, amount: 1 }} > <Card orientation="horizontal" @@ -128,7 +128,7 @@ export default function InfoPage() { <motion.div initial={{ opacity: 0, y: 50}} whileInView={{ opacity: 1, y: 0, transition: { delay: 0.2, duration: 0.5}}} - viewport={{ once: false, amount: 1 }} + viewport={{ once: true, amount: 1 }} > <Card orientation="horizontal" @@ -152,7 +152,7 @@ export default function InfoPage() { <motion.div initial={{ opacity: 0, y: 50}} whileInView={{ opacity: 1, y: 0, transition: { delay: 0.2, duration: 0.5}}} - viewport={{ once: false, amount: 1 }} + viewport={{ once: true, amount: 1 }} > <Card orientation="horizontal"