added animation to logo

package.json

@@ -4,6 +4,7 @@
 	"private": true,
 	"dependencies": {
 		"@testing-library/user-event": "^12.8.3",
+		"animejs": "^3.2.2",
 		"clsx": "^1.1.1",
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2",

src/app/pages/Designathons/Designathon23/index.js

@@ -30,7 +30,12 @@ const Designathon23 = () => (
 				<Splash />
 			</div>
 			<div className={cn.title}>
-				<Icon className={cn.icon} src="designathon-white.svg" w="96" h="96" />
+				<Icon
+					className={cn.icon}
+					src="designathon-white.svg"
+					w="96"
+					h="96"
+				/>
 				<Text size="XXXL" className="bold">
 					You Belong Here
 				</Text>
@@ -47,25 +52,26 @@ const Designathon23 = () => (
 			<Section>
 				<h1>About</h1>
 				<p>
-					Design-a-thon is a 3 day long hybrid event where you or a team design
-					a product focused on the theme: community and inclusivity. It takes
-					place on February 24, starting at 5:30 pm and ends February 26, 8:00
-					pm PST.
+					Design-a-thon is a 3 day long hybrid event where you or a
+					team design a product focused on the theme: community and
+					inclusivity. It takes place on February 24, starting at 5:30
+					pm and ends February 26, 8:00 pm PST.
 				</p>
 				<p>
-					Design at UCI is the premier student-run organization at UCI for
-					anything graphic design, UI/UX design, product design, and more.
-					Started in 2016, we foster a special community for all digital
-					designers to connect, learn, and innovate.
+					Design at UCI is the premier student-run organization at UCI
+					for anything graphic design, UI/UX design, product design,
+					and more. Started in 2016, we foster a special community for
+					all digital designers to connect, learn, and innovate.
 				</p>
 				<p>
-					Design at UCI’s designathon is the largest collegiate designathon in
-					Orange County. Each year, we bring together hundreds of student
-					designers nationwide to define, develop, and pitch a product built
-					from scratch. We hope that this experience can help you acquire and
-					grow both your soft and hard skills in empathizing with your users,
-					defining a set of goals and needs, developing your product, and
-					improving your confidence and creativity as a human-centric designer.
+					Design at UCI’s designathon is the largest collegiate
+					designathon in Orange County. Each year, we bring together
+					hundreds of student designers nationwide to define, develop,
+					and pitch a product built from scratch. We hope that this
+					experience can help you acquire and grow both your soft and
+					hard skills in empathizing with your users, defining a set
+					of goals and needs, developing your product, and improving
+					your confidence and creativity as a human-centric designer.
 				</p>
 			</Section>
 		</div>

src/app/pages/Designathons/Designathon24/Designathon24.js

@@ -14,14 +14,12 @@ import {
 	Speakers,
 } from "./components";
 import Schedule from "./components/Schedule";
-import { Splash } from "./components/Splash";
+import { Splash } from "./components/Splash/Splash";
 
 const Designathon24 = () => (
 	<main className={cn.container}>
 		<div className={cn.hero}>
-			{/* <div style={{ height: "100%", width: "100%" }}> */}
 			<Splash />
-			{/* </div> */}
 			<div className={cn.title}>
 				{/* <Icon className={cn.icon} src="designathon-white.svg" w="96" h="96" /> */}
 				{/* <Text

src/app/pages/Designathons/Designathon24/components/Splash/Splash.jsx

@@ -0,0 +1,30 @@
+import { memo, useEffect, useRef } from "react";
+import { ReactComponent as SplashLogo } from "./logo.svg";
+import cn from "./Splash.module.scss";
+import anime from "animejs";
+
+const Splash = memo(() => {
+	const logoRef = useRef(null);
+	useEffect(() => {
+		console.log(logoRef.current.children[0]);
+		console.dir(logoRef.current.children[0]);
+
+		anime({
+			targets: "path.word",
+			strokeDashoffset: [anime.setDashoffset, 0],
+			easing: "easeInOutSine",
+			duration: 2000,
+			delay: function (el, i) {
+				return i * 300;
+			},
+		});
+	}, []);
+
+	return (
+		<div className={cn.container}>
+			<SplashLogo ref={logoRef} className={cn.logo} />
+		</div>
+	);
+});
+
+export { Splash };

src/app/pages/Designathons/Designathon24/components/Splash/Splash.module.scss

@@ -0,0 +1,40 @@
+.container {
+    background-color: #fff5e0;
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    display: grid;
+    place-content: center;
+
+    .logo {
+        max-width: 50vw;
+        margin: 0 auto;
+
+        path {
+            stroke-width: 5;
+            .word {
+                stroke-dashoffset: 10px;
+                stroke-width: 5;
+                stroke-dasharray: 1500;
+                opacity: 0;
+
+                @for $i from 1 through 10 {
+                    &:nth-child(#{$i}n) {
+                        animation: fadeIn forwards 1s #{$i * 350}ms ease-in;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+
+}