From 734645265305aebc1836271c4963af8b9c3725c5 Mon Sep 17 00:00:00 2001 From: Ryan Yang Date: Sun, 31 Mar 2024 17:40:41 -0700 Subject: [PATCH] added animation to logo --- package-lock.json | 6 + package.json | 1 + .../pages/Designathons/Designathon23/index.js | 38 ++-- .../Designathon24/Designathon24.js | 4 +- .../components/Splash/Splash.jsx | 30 +++ .../components/Splash/Splash.module.scss | 40 ++++ .../Designathon24/components/Splash/index.jsx | 25 --- .../Designathon24/components/Splash/logo.svg | 206 +++++++++++++----- 8 files changed, 248 insertions(+), 102 deletions(-) create mode 100644 src/app/pages/Designathons/Designathon24/components/Splash/Splash.jsx create mode 100644 src/app/pages/Designathons/Designathon24/components/Splash/Splash.module.scss delete mode 100644 src/app/pages/Designathons/Designathon24/components/Splash/index.jsx diff --git a/package-lock.json b/package-lock.json index aab0c026..0ed269a6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "1.0.1", "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", @@ -4277,6 +4278,11 @@ "ajv": "^6.9.1" } }, + "node_modules/animejs": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/animejs/-/animejs-3.2.2.tgz", + "integrity": "sha512-Ao95qWLpDPXXM+WrmwcKbl6uNlC5tjnowlaRYtuVDHHoygjtIPfDUoK9NthrlZsQSKjZXlmji2TrBUAVbiH0LQ==" + }, "node_modules/ansi-escapes": { "version": "4.3.2", "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz", diff --git a/package.json b/package.json index c33d3131..f8e388d2 100644 --- a/package.json +++ b/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", diff --git a/src/app/pages/Designathons/Designathon23/index.js b/src/app/pages/Designathons/Designathon23/index.js index 7a738d14..f45dee2e 100644 --- a/src/app/pages/Designathons/Designathon23/index.js +++ b/src/app/pages/Designathons/Designathon23/index.js @@ -30,7 +30,12 @@ const Designathon23 = () => (
- + You Belong Here @@ -47,25 +52,26 @@ const Designathon23 = () => (

About

- 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.

- 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.

- 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.

diff --git a/src/app/pages/Designathons/Designathon24/Designathon24.js b/src/app/pages/Designathons/Designathon24/Designathon24.js index 8aa04339..c50610ef 100644 --- a/src/app/pages/Designathons/Designathon24/Designathon24.js +++ b/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 = () => (
- {/*
*/} - {/*
*/}
{/* */} {/* { + 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 ( +
+ +
+ ); +}); + +export { Splash }; diff --git a/src/app/pages/Designathons/Designathon24/components/Splash/Splash.module.scss b/src/app/pages/Designathons/Designathon24/components/Splash/Splash.module.scss new file mode 100644 index 00000000..5dc61163 --- /dev/null +++ b/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; + } + +} \ No newline at end of file diff --git a/src/app/pages/Designathons/Designathon24/components/Splash/index.jsx b/src/app/pages/Designathons/Designathon24/components/Splash/index.jsx deleted file mode 100644 index f8dc942f..00000000 --- a/src/app/pages/Designathons/Designathon24/components/Splash/index.jsx +++ /dev/null @@ -1,25 +0,0 @@ -import { memo } from "react"; -import splash from "./logo.svg"; - -const Splash = memo(() => { - return ( -
- True To You -
- ); -}); - -export { Splash }; diff --git a/src/app/pages/Designathons/Designathon24/components/Splash/logo.svg b/src/app/pages/Designathons/Designathon24/components/Splash/logo.svg index 319fb32a..a364e146 100644 --- a/src/app/pages/Designathons/Designathon24/components/Splash/logo.svg +++ b/src/app/pages/Designathons/Designathon24/components/Splash/logo.svg @@ -1,58 +1,148 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file