From b72c27f84b367c2c3ecc9ad8b84f4e8688436d8d Mon Sep 17 00:00:00 2001 From: Joye Fu Date: Mon, 14 Jul 2025 16:53:44 +1000 Subject: [PATCH 1/9] Add fade in animations to front page --- frontend/package-lock.json | 1 - .../src/components/About/AboutHomepage.tsx | 101 +++++++++--------- .../Animations/FadeEnterAnimation.tsx | 26 +++++ frontend/src/components/Event/EventsBrief.tsx | 39 ++++--- frontend/src/components/Landing/index.tsx | 6 +- frontend/src/components/Sponsors/index.tsx | 37 ++++--- package-lock.json | 2 +- package.json | 1 + 8 files changed, 128 insertions(+), 85 deletions(-) create mode 100644 frontend/src/components/Animations/FadeEnterAnimation.tsx create mode 100644 package.json diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 450f4f7..71f8ec3 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -3383,7 +3383,6 @@ "version": "0.511.0", "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.511.0.tgz", "integrity": "sha512-VK5a2ydJ7xm8GvBeKLS9mu1pVK6ucef9780JVUjw6bAjJL/QXnd4Y0p7SPeOUMC27YhzNCZvm5d/QX0Tp3rc0w==", - "license": "ISC", "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" diff --git a/frontend/src/components/About/AboutHomepage.tsx b/frontend/src/components/About/AboutHomepage.tsx index 4492b71..111b809 100644 --- a/frontend/src/components/About/AboutHomepage.tsx +++ b/frontend/src/components/About/AboutHomepage.tsx @@ -1,61 +1,66 @@ import Image from "next/image"; +import FadeEnterAnimation from '@/components/Animations/FadeEnterAnimation'; export default function AboutHomePage() { return (
-
-

ABOUT

-
-
-
- {/* LEFT SIDE */} - {/* NOTE: there is slightly altered from about/index.tsx */} -
-
- CSESoc Icon -
-

CSESoc

-

unsw-computer-science-engineering-society

-
- People -
- 16k members · 146{' '} - internal members + +
+

ABOUT

+
+ + +
+
+ {/* LEFT SIDE */} + {/* NOTE: there is slightly altered from about/index.tsx */} +
+
+ CSESoc Icon +
+

CSESoc

+

unsw-computer-science-engineering-society

+
+ People +
+ 16k members · 146{' '} + internal members +
+
+
+ Location + Sydney, Australia +
+
-
- Location - Sydney, Australia -
- -
- {/* RIGHT SIDE */} -
-

- We are one of the largest and most active societies at UNSW, and {" "} - the largest computing society in the southern hemisphere. -

- CSESoc comprises {" "} - over 16k members - {" "}spanning across various degrees including Computer Science, - Software Engineering, Bioinformatics and Computer Engineering. -

- We are here to fulfil the social, personal and professional needs of CSE students, - and promote computing through a variety of forms. -

-
- - - + {/* RIGHT SIDE */} +
+

+ We are one of the largest and most active societies at UNSW, and {" "} + the largest computing society in the southern hemisphere. +

+ CSESoc comprises {" "} + over 16k members + {" "}spanning across various degrees including Computer Science, + Software Engineering, Bioinformatics and Computer Engineering. +

+ We are here to fulfil the social, personal and professional needs of CSE students, + and promote computing through a variety of forms. +

+
-
+
); } diff --git a/frontend/src/components/Animations/FadeEnterAnimation.tsx b/frontend/src/components/Animations/FadeEnterAnimation.tsx new file mode 100644 index 0000000..9e47597 --- /dev/null +++ b/frontend/src/components/Animations/FadeEnterAnimation.tsx @@ -0,0 +1,26 @@ +import { ReactNode } from 'react' +import { motion, useAnimation, AnimationControls } from 'framer-motion'; + +interface FadeEnterProps { + children: ReactNode; + delay?: number; +} + +const FadeEnterAnimation = ({ children, delay = 0 }: FadeEnterProps) => { + + return ( + + {children} + + ) +} + +export default FadeEnterAnimation \ No newline at end of file diff --git a/frontend/src/components/Event/EventsBrief.tsx b/frontend/src/components/Event/EventsBrief.tsx index 65105eb..f46c3fc 100644 --- a/frontend/src/components/Event/EventsBrief.tsx +++ b/frontend/src/components/Event/EventsBrief.tsx @@ -1,28 +1,33 @@ import React from 'react'; import { events } from '../../../public/data/events'; import EventsCarousel from './EventsCarousel'; -import { ChevronRight } from 'lucide-react'; +import { ChevronRight, Facebook } from 'lucide-react'; +import FadeEnterAnimation from '../Animations/FadeEnterAnimation'; const EventBrief = () => { return (
-
-

UPCOMING EVENTS

-
- {events.length !== 0 ? - : -
-

No upcoming events... check back here later!

+ +
+

UPCOMING EVENTS

- } - + + + {events.length !== 0 ? + : +
+

No upcoming events... check back here later!

+
+ } + +
); }; diff --git a/frontend/src/components/Landing/index.tsx b/frontend/src/components/Landing/index.tsx index ce04867..e879a9c 100644 --- a/frontend/src/components/Landing/index.tsx +++ b/frontend/src/components/Landing/index.tsx @@ -1,5 +1,6 @@ import Background from '@/components/Background'; import Navbar from '@/components/Navbar'; +import Loading from '../Animations/Loading'; const Landing = () => { return ( @@ -9,6 +10,7 @@ const Landing = () => { > +
@@ -21,8 +23,8 @@ const Landing = () => {

We are the principal representative body for{' '} UNSW computing diff --git a/frontend/src/components/Sponsors/index.tsx b/frontend/src/components/Sponsors/index.tsx index 14ebb1f..1792ac6 100644 --- a/frontend/src/components/Sponsors/index.tsx +++ b/frontend/src/components/Sponsors/index.tsx @@ -2,6 +2,7 @@ import React from 'react'; import Footer from '@/components/Footer'; import SponsorCarousel from './SponsorCarousel'; import { ChevronRight } from 'lucide-react'; +import FadeEnterAnimation from '../Animations/FadeEnterAnimation'; const Sponsors = () => { return ( @@ -9,24 +10,28 @@ const Sponsors = () => { className="flex flex-col min-h-screen py-8 xl:px-24 sm:px-10 px-8 relative mt-20" id="sponsors" > -
-

OUR SPONSORS

-
-
-
- -
- - - + +
+

OUR SPONSORS

+
+ + + -
+
Date: Mon, 14 Jul 2025 18:43:41 +1000 Subject: [PATCH 2/9] Add basic loading animation --- .../Animations/FadeEnterAnimation.tsx | 2 +- .../src/components/Animations/Loading.tsx | 66 +++++++++++++++++++ frontend/src/components/Landing/index.tsx | 14 ++-- 3 files changed, 74 insertions(+), 8 deletions(-) create mode 100644 frontend/src/components/Animations/Loading.tsx diff --git a/frontend/src/components/Animations/FadeEnterAnimation.tsx b/frontend/src/components/Animations/FadeEnterAnimation.tsx index 9e47597..ef5339c 100644 --- a/frontend/src/components/Animations/FadeEnterAnimation.tsx +++ b/frontend/src/components/Animations/FadeEnterAnimation.tsx @@ -13,7 +13,7 @@ const FadeEnterAnimation = ({ children, delay = 0 }: FadeEnterProps) => { initial={{ opacity: 0, y: 30 }} whileInView={{ opacity: 1, y: 0 }} transition={{ - duration: 0.5, + duration: 0.6, delay, }} viewport={{ amount: 0.3, once: true }} diff --git a/frontend/src/components/Animations/Loading.tsx b/frontend/src/components/Animations/Loading.tsx new file mode 100644 index 0000000..ddec762 --- /dev/null +++ b/frontend/src/components/Animations/Loading.tsx @@ -0,0 +1,66 @@ +import React from 'react' +import { motion } from 'framer-motion'; + +const Loading = () => { + const [isLoading, setIsLoading] = React.useState(true); + + // Toggling the animations + const loadDuration = 3; + const loadStart = 1; + const loadEnd = 2.5; + + React.useLayoutEffect(() => { + document.body.style.overflow = 'hidden'; + + const startAnimation = () => { + const timer = setTimeout(() => { + document.body.style.overflow = ''; + setIsLoading(false); + }, loadDuration * 1000); + + return timer; + }; + + const timer = requestAnimationFrame(() => startAnimation()); + + return () => { + cancelAnimationFrame(timer); + document.body.style.overflow = ''; + }; + }, []); + + if (!isLoading) return null; + + return ( + +
+ +
+ + ) +} + +export default Loading \ No newline at end of file diff --git a/frontend/src/components/Landing/index.tsx b/frontend/src/components/Landing/index.tsx index e879a9c..84c187b 100644 --- a/frontend/src/components/Landing/index.tsx +++ b/frontend/src/components/Landing/index.tsx @@ -8,16 +8,16 @@ const Landing = () => { className="flex flex-col min-h-screen justify-between py-8 xl:px-24 md:px-10 px-5 relative overflow-hidden" id="landing" > + -
-
-

{'

'}

-

Hello World!

-

{'

'}

-
+
+

{'

'}

+

Hello World!

+

{''}

+

{'

'}

@@ -31,7 +31,7 @@ const Landing = () => { {' '}students.

{''}

-
+
From 35b9e71200aba7d1c442bdf78d456f2e456309bb Mon Sep 17 00:00:00 2001 From: Joye Fu Date: Mon, 14 Jul 2025 21:32:40 +1000 Subject: [PATCH 3/9] Add animation to hide loading --- .../Animations/FadeEnterAnimation.tsx | 7 +-- .../src/components/Animations/Loading.tsx | 52 +++++++++++++++---- frontend/src/components/Background.tsx | 18 +++++-- frontend/src/components/Landing/index.tsx | 43 ++++++++++----- 4 files changed, 90 insertions(+), 30 deletions(-) diff --git a/frontend/src/components/Animations/FadeEnterAnimation.tsx b/frontend/src/components/Animations/FadeEnterAnimation.tsx index ef5339c..92ea8a7 100644 --- a/frontend/src/components/Animations/FadeEnterAnimation.tsx +++ b/frontend/src/components/Animations/FadeEnterAnimation.tsx @@ -1,12 +1,13 @@ import { ReactNode } from 'react' -import { motion, useAnimation, AnimationControls } from 'framer-motion'; +import { motion } from 'framer-motion'; interface FadeEnterProps { children: ReactNode; delay?: number; + viewport?: number; } -const FadeEnterAnimation = ({ children, delay = 0 }: FadeEnterProps) => { +const FadeEnterAnimation = ({ children, delay = 0, viewport = 0.3 }: FadeEnterProps) => { return ( { duration: 0.6, delay, }} - viewport={{ amount: 0.3, once: true }} + viewport={{ amount: viewport, once: true }} > {children} diff --git a/frontend/src/components/Animations/Loading.tsx b/frontend/src/components/Animations/Loading.tsx index ddec762..466923c 100644 --- a/frontend/src/components/Animations/Loading.tsx +++ b/frontend/src/components/Animations/Loading.tsx @@ -2,34 +2,65 @@ import React from 'react' import { motion } from 'framer-motion'; const Loading = () => { - const [isLoading, setIsLoading] = React.useState(true); + const [isLoading, setIsLoading] = React.useState(false); - // Toggling the animations + // Toggling the animation durations const loadDuration = 3; const loadStart = 1; const loadEnd = 2.5; + // Loading dots animation + const [dots, setDots] = React.useState(''); + React.useEffect(() => { + if (!isLoading) return; + + const interval = setInterval(() => { + setDots(prev => { + if (prev === '...') return ''; + return prev + '.'; + }); + }, 800); + + return () => clearInterval(interval); + }, [isLoading]); + React.useLayoutEffect(() => { - document.body.style.overflow = 'hidden'; + + // Only show loading on hard refresh + if (!window || !window.sessionStorage) { + setIsLoading(true); + } else { + if (sessionStorage.getItem("firstload") === null) { + sessionStorage.setItem("firstload", "true"); + } else if (sessionStorage.getItem("firstload") === "true") { + setIsLoading(true); + sessionStorage.setItem("firstload", "false"); + } else { + // Don't show loading animation + setIsLoading(false); + return; + } + } + // Otherwise, show loading animation + document.body.style.overflow = 'hidden'; const startAnimation = () => { const timer = setTimeout(() => { document.body.style.overflow = ''; setIsLoading(false); - }, loadDuration * 1000); - + }, loadDuration * 1000); return timer; }; - const timer = requestAnimationFrame(() => startAnimation()); - return () => { cancelAnimationFrame(timer); document.body.style.overflow = ''; }; }, []); - if (!isLoading) return null; + if (!isLoading) { + return null; + } return ( { style={{ willChange: 'opacity', }} - > + > +
+ Loading{dots} +
{ return ( - + + + ); }; diff --git a/frontend/src/components/Landing/index.tsx b/frontend/src/components/Landing/index.tsx index 84c187b..d59c355 100644 --- a/frontend/src/components/Landing/index.tsx +++ b/frontend/src/components/Landing/index.tsx @@ -1,6 +1,8 @@ import Background from '@/components/Background'; import Navbar from '@/components/Navbar'; import Loading from '../Animations/Loading'; +import FadeEnterAnimation from '../Animations/FadeEnterAnimation'; +import { motion } from 'framer-motion'; const Landing = () => { return ( @@ -9,29 +11,42 @@ const Landing = () => { id="landing" > - + + +
+

{'

'}

Hello World!

{''}

-
-

{'

'}

-

- We are the principal representative body for{' '} - - UNSW computing - - {' '}students. -

-

{''}

+ + +
+

{'

'}

+

+ We are the principal representative body for{' '} + + UNSW computing + + {' '}students. +

+

{''}

+
From c3a69ee4d07ba1b70b3d958af30ff9c4c3078f8d Mon Sep 17 00:00:00 2001 From: Joye Fu Date: Mon, 14 Jul 2025 22:05:10 +1000 Subject: [PATCH 4/9] Fix landing page animation sequence --- .../src/components/About/AboutHomepage.tsx | 10 ++--- .../components/Animations/FadeInAnimation.tsx | 29 +++++++++++++++ .../src/components/Animations/Loading.tsx | 2 +- ...Animation.tsx => ScrollEnterAnimation.tsx} | 8 ++-- frontend/src/components/Background.tsx | 17 ++------- frontend/src/components/Event/EventsBrief.tsx | 10 ++--- frontend/src/components/Landing/index.tsx | 37 +++++++++++-------- frontend/src/components/Sponsors/index.tsx | 10 ++--- 8 files changed, 73 insertions(+), 50 deletions(-) create mode 100644 frontend/src/components/Animations/FadeInAnimation.tsx rename frontend/src/components/Animations/{FadeEnterAnimation.tsx => ScrollEnterAnimation.tsx} (64%) diff --git a/frontend/src/components/About/AboutHomepage.tsx b/frontend/src/components/About/AboutHomepage.tsx index 111b809..a665178 100644 --- a/frontend/src/components/About/AboutHomepage.tsx +++ b/frontend/src/components/About/AboutHomepage.tsx @@ -1,15 +1,15 @@ import Image from "next/image"; -import FadeEnterAnimation from '@/components/Animations/FadeEnterAnimation'; +import ScrollEnterAnimation from '@/components/Animations/ScrollEnterAnimation'; export default function AboutHomePage() { return (
- +

ABOUT

- - + +
{/* LEFT SIDE */} @@ -60,7 +60,7 @@ export default function AboutHomePage() {
- + ); } diff --git a/frontend/src/components/Animations/FadeInAnimation.tsx b/frontend/src/components/Animations/FadeInAnimation.tsx new file mode 100644 index 0000000..c052ad2 --- /dev/null +++ b/frontend/src/components/Animations/FadeInAnimation.tsx @@ -0,0 +1,29 @@ +import { ReactNode } from 'react' +import { motion } from 'framer-motion'; + +interface FadeInProps { + children: ReactNode; + delay?: number; + viewport?: number; + yInitial?: number; + className?: string; +} + +const FadeInAnimation = ({ children, delay = 0, yInitial = 30, className }: FadeInProps) => { + + return ( + + {children} + + ) +} + +export default FadeInAnimation \ No newline at end of file diff --git a/frontend/src/components/Animations/Loading.tsx b/frontend/src/components/Animations/Loading.tsx index 466923c..1441619 100644 --- a/frontend/src/components/Animations/Loading.tsx +++ b/frontend/src/components/Animations/Loading.tsx @@ -75,7 +75,7 @@ const Loading = () => { willChange: 'opacity', }} > -
+
Loading{dots}
diff --git a/frontend/src/components/Animations/FadeEnterAnimation.tsx b/frontend/src/components/Animations/ScrollEnterAnimation.tsx similarity index 64% rename from frontend/src/components/Animations/FadeEnterAnimation.tsx rename to frontend/src/components/Animations/ScrollEnterAnimation.tsx index 92ea8a7..b8348b5 100644 --- a/frontend/src/components/Animations/FadeEnterAnimation.tsx +++ b/frontend/src/components/Animations/ScrollEnterAnimation.tsx @@ -1,13 +1,13 @@ import { ReactNode } from 'react' import { motion } from 'framer-motion'; -interface FadeEnterProps { +interface ScrollEnterProps { children: ReactNode; delay?: number; viewport?: number; } -const FadeEnterAnimation = ({ children, delay = 0, viewport = 0.3 }: FadeEnterProps) => { +const ScrollEnterAnimation = ({ children, delay = 0 }: ScrollEnterProps) => { return ( {children} ) } -export default FadeEnterAnimation \ No newline at end of file +export default ScrollEnterAnimation \ No newline at end of file diff --git a/frontend/src/components/Background.tsx b/frontend/src/components/Background.tsx index 5cfbfe3..2b23d1e 100644 --- a/frontend/src/components/Background.tsx +++ b/frontend/src/components/Background.tsx @@ -1,21 +1,10 @@ import Spline from '@splinetool/react-spline'; -import { motion } from 'framer-motion'; const Background = () => { return ( - - - + ); }; diff --git a/frontend/src/components/Event/EventsBrief.tsx b/frontend/src/components/Event/EventsBrief.tsx index f46c3fc..77ad358 100644 --- a/frontend/src/components/Event/EventsBrief.tsx +++ b/frontend/src/components/Event/EventsBrief.tsx @@ -2,17 +2,17 @@ import React from 'react'; import { events } from '../../../public/data/events'; import EventsCarousel from './EventsCarousel'; import { ChevronRight, Facebook } from 'lucide-react'; -import FadeEnterAnimation from '../Animations/FadeEnterAnimation'; +import ScrollEnterAnimation from '../Animations/ScrollEnterAnimation'; const EventBrief = () => { return (
- +

UPCOMING EVENTS

- - + + {events.length !== 0 ? :
@@ -27,7 +27,7 @@ const EventBrief = () => {
- +
); }; diff --git a/frontend/src/components/Landing/index.tsx b/frontend/src/components/Landing/index.tsx index d59c355..da9efa4 100644 --- a/frontend/src/components/Landing/index.tsx +++ b/frontend/src/components/Landing/index.tsx @@ -1,37 +1,42 @@ import Background from '@/components/Background'; import Navbar from '@/components/Navbar'; import Loading from '../Animations/Loading'; -import FadeEnterAnimation from '../Animations/FadeEnterAnimation'; -import { motion } from 'framer-motion'; +import FadeInAnimation from '../Animations/FadeInAnimation'; const Landing = () => { + const animationSequence = { + navbar: 1, + h1: 1.2, + h2: 1.3, + background: 2.0, + }; + return (
- + - - + + + +
- +

{'

'}

Hello World!

{''}

- - + +

{'

'}

@@ -46,7 +51,7 @@ const Landing = () => {

{''}

- +
diff --git a/frontend/src/components/Sponsors/index.tsx b/frontend/src/components/Sponsors/index.tsx index 1792ac6..b3e2722 100644 --- a/frontend/src/components/Sponsors/index.tsx +++ b/frontend/src/components/Sponsors/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import Footer from '@/components/Footer'; import SponsorCarousel from './SponsorCarousel'; import { ChevronRight } from 'lucide-react'; -import FadeEnterAnimation from '../Animations/FadeEnterAnimation'; +import ScrollEnterAnimation from '../Animations/ScrollEnterAnimation'; const Sponsors = () => { return ( @@ -10,12 +10,12 @@ const Sponsors = () => { className="flex flex-col min-h-screen py-8 xl:px-24 sm:px-10 px-8 relative mt-20" id="sponsors" > - +

OUR SPONSORS

- - + +
{
- +
Date: Mon, 14 Jul 2025 22:51:28 +1000 Subject: [PATCH 5/9] Stagger Spline loading animation --- .../components/Animations/FadeInAnimation.tsx | 2 +- .../src/components/Animations/Loading.tsx | 10 ++++---- frontend/src/components/Background.tsx | 23 ++++++++++++++++--- frontend/src/components/Landing/index.tsx | 8 +++---- 4 files changed, 30 insertions(+), 13 deletions(-) diff --git a/frontend/src/components/Animations/FadeInAnimation.tsx b/frontend/src/components/Animations/FadeInAnimation.tsx index c052ad2..b07e578 100644 --- a/frontend/src/components/Animations/FadeInAnimation.tsx +++ b/frontend/src/components/Animations/FadeInAnimation.tsx @@ -16,7 +16,7 @@ const FadeInAnimation = ({ children, delay = 0, yInitial = 30, className }: Fade initial={{ opacity: 0, y: yInitial }} animate={{ opacity: 1, y: 0 }} transition={{ - duration: 0.6, + duration: 0.5, delay, }} className={className} diff --git a/frontend/src/components/Animations/Loading.tsx b/frontend/src/components/Animations/Loading.tsx index 1441619..5e605c7 100644 --- a/frontend/src/components/Animations/Loading.tsx +++ b/frontend/src/components/Animations/Loading.tsx @@ -7,7 +7,7 @@ const Loading = () => { // Toggling the animation durations const loadDuration = 3; const loadStart = 1; - const loadEnd = 2.5; + const loadEnd = 0.5; // Loading dots animation const [dots, setDots] = React.useState(''); @@ -67,8 +67,8 @@ const Loading = () => { initial={{ opacity: 1}} animate={{ opacity: 0 }} transition={{ - duration: loadDuration - loadEnd, - delay: loadEnd, + duration: loadEnd, + delay: loadDuration - loadEnd, }} className="fixed inset-0 bg-[#000021] z-[999] flex flex-col items-center justify-center" style={{ @@ -80,11 +80,11 @@ const Loading = () => {
{ + + // delay background loading + const [shouldLoad, setShouldLoad] = useState(false); + useEffect(() => { + const timer = setTimeout(() => { + setShouldLoad(true); + }, 800); + + return () => clearTimeout(timer); + }, []); + return ( - + <> + {shouldLoad && ( + + )} + ); }; diff --git a/frontend/src/components/Landing/index.tsx b/frontend/src/components/Landing/index.tsx index da9efa4..6594b82 100644 --- a/frontend/src/components/Landing/index.tsx +++ b/frontend/src/components/Landing/index.tsx @@ -5,10 +5,10 @@ import FadeInAnimation from '../Animations/FadeInAnimation'; const Landing = () => { const animationSequence = { - navbar: 1, - h1: 1.2, - h2: 1.3, - background: 2.0, + navbar: 0.1, + h1: 0.3, + h2: 0.4, + background: 2.2, }; return ( From e005967dcb53c2468b62daa8e5c6429b5bea7d75 Mon Sep 17 00:00:00 2001 From: Joye Fu Date: Mon, 14 Jul 2025 23:30:53 +1000 Subject: [PATCH 6/9] Remove loading text --- .../src/components/Animations/Loading.tsx | 26 +++---------------- frontend/src/components/Background.tsx | 2 +- frontend/src/components/Landing/index.tsx | 12 +++------ 3 files changed, 9 insertions(+), 31 deletions(-) diff --git a/frontend/src/components/Animations/Loading.tsx b/frontend/src/components/Animations/Loading.tsx index 5e605c7..33f4665 100644 --- a/frontend/src/components/Animations/Loading.tsx +++ b/frontend/src/components/Animations/Loading.tsx @@ -2,31 +2,16 @@ import React from 'react' import { motion } from 'framer-motion'; const Loading = () => { - const [isLoading, setIsLoading] = React.useState(false); + const [isLoading, setIsLoading] = React.useState(true); // Toggling the animation durations const loadDuration = 3; - const loadStart = 1; + const loadStart = 0.1; const loadEnd = 0.5; - // Loading dots animation - const [dots, setDots] = React.useState(''); - React.useEffect(() => { - if (!isLoading) return; - - const interval = setInterval(() => { - setDots(prev => { - if (prev === '...') return ''; - return prev + '.'; - }); - }, 800); - - return () => clearInterval(interval); - }, [isLoading]); - React.useLayoutEffect(() => { - // Only show loading on hard refresh + // Only show loading on initial load if (!window || !window.sessionStorage) { setIsLoading(true); } else { @@ -64,7 +49,7 @@ const Loading = () => { return ( { willChange: 'opacity', }} > -
- Loading{dots} -
{ useEffect(() => { const timer = setTimeout(() => { setShouldLoad(true); - }, 800); + }, 900); return () => clearTimeout(timer); }, []); diff --git a/frontend/src/components/Landing/index.tsx b/frontend/src/components/Landing/index.tsx index b233d89..0654a9e 100644 --- a/frontend/src/components/Landing/index.tsx +++ b/frontend/src/components/Landing/index.tsx @@ -1,14 +1,13 @@ import Background from '@/components/Background'; -import Navbar from '@/components/Navbar'; import Loading from '../Animations/Loading'; import FadeInAnimation from '../Animations/FadeInAnimation'; +import React from 'react'; const Landing = () => { const animationSequence = { - navbar: 0.1, - h1: 0.3, - h2: 0.4, - background: 2.2, + h1: 0.1, + h2: 0.2, + background: 2.5, }; return ( @@ -17,9 +16,6 @@ const Landing = () => { id="landing" > - - - Date: Tue, 15 Jul 2025 11:35:16 +1000 Subject: [PATCH 7/9] Remove loading animation --- frontend/src/components/Animations/FadeInAnimation.tsx | 1 + frontend/src/components/Animations/Loading.tsx | 2 +- frontend/src/components/Animations/ScrollEnterAnimation.tsx | 5 +++-- frontend/src/components/Background.tsx | 2 +- frontend/src/components/Landing/index.tsx | 6 ++---- 5 files changed, 8 insertions(+), 8 deletions(-) diff --git a/frontend/src/components/Animations/FadeInAnimation.tsx b/frontend/src/components/Animations/FadeInAnimation.tsx index b07e578..465d747 100644 --- a/frontend/src/components/Animations/FadeInAnimation.tsx +++ b/frontend/src/components/Animations/FadeInAnimation.tsx @@ -17,6 +17,7 @@ const FadeInAnimation = ({ children, delay = 0, yInitial = 30, className }: Fade animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5, + ease: "easeOut", delay, }} className={className} diff --git a/frontend/src/components/Animations/Loading.tsx b/frontend/src/components/Animations/Loading.tsx index 33f4665..4224c2f 100644 --- a/frontend/src/components/Animations/Loading.tsx +++ b/frontend/src/components/Animations/Loading.tsx @@ -60,7 +60,7 @@ const Loading = () => { willChange: 'opacity', }} > -
+
{ return ( { useEffect(() => { const timer = setTimeout(() => { setShouldLoad(true); - }, 900); + }, 700); return () => clearTimeout(timer); }, []); diff --git a/frontend/src/components/Landing/index.tsx b/frontend/src/components/Landing/index.tsx index 0654a9e..6f216f7 100644 --- a/frontend/src/components/Landing/index.tsx +++ b/frontend/src/components/Landing/index.tsx @@ -1,5 +1,4 @@ import Background from '@/components/Background'; -import Loading from '../Animations/Loading'; import FadeInAnimation from '../Animations/FadeInAnimation'; import React from 'react'; @@ -7,7 +6,7 @@ const Landing = () => { const animationSequence = { h1: 0.1, h2: 0.2, - background: 2.5, + background: 2, }; return ( @@ -15,11 +14,10 @@ const Landing = () => { className="flex flex-col min-h-screen justify-end py-8 xl:px-24 md:px-10 px-5 relative overflow-hidden" id="landing" > - From d4a825f690d11eedec65a231c9bd9397a0748c60 Mon Sep 17 00:00:00 2001 From: Joye Fu Date: Tue, 15 Jul 2025 11:53:17 +1000 Subject: [PATCH 8/9] Add animation to about page --- frontend/src/pages/about/index.tsx | 186 +++++++++++++++-------------- 1 file changed, 98 insertions(+), 88 deletions(-) diff --git a/frontend/src/pages/about/index.tsx b/frontend/src/pages/about/index.tsx index ff4896b..9ec5e62 100644 --- a/frontend/src/pages/about/index.tsx +++ b/frontend/src/pages/about/index.tsx @@ -3,20 +3,30 @@ import PageTitle from "@/components/PageTitle"; import Image from 'next/image'; import Link from 'next/link'; import TabTitle from 'next/head'; +import FadeInAnimation from "@/components/Animations/FadeInAnimation"; export default function AboutPage() { + + const animationSequence = { + title: 0, + mainContent: 0.2, + sidebar: 0.2, + } + return ( About Us | CSESoc UNSW - -
-
-
+ + + +
+
+
{/* LEFT SIDE */} -
+
CSESoc Icon
@@ -43,103 +53,103 @@ export default function AboutPage() { Mail info@csesoc.org.au
-
- {/* RIGHT SIDE */} -
-
-

- csesoc/README.md -

-
-

- CSESoc is the official representative body of computing students at UNSW. We are one of the - largest and most active societies at UNSW, and the largest computing society in the southern hemisphere. - CSESoc comprises over 16k members spanning across various degrees including Computer Science, Software Engineering, - Bioinformatics and Computer Engineering. We are here to fulfil the social, personal and professional - needs of CSE students, and promote computing through a variety of forms. -

-
-

- We are a society for the students, by the students. Here’s an overview of what we do: + + {/* RIGHT SIDE */} +

+ +

+ csesoc/README.md

+
+

+ CSESoc is the official representative body of computing students at UNSW. We are one of the + largest and most active societies at UNSW, and the largest computing society in the southern hemisphere. + CSESoc comprises over 16k members spanning across various degrees including Computer Science, Software Engineering, + Bioinformatics and Computer Engineering. We are here to fulfil the social, personal and professional + needs of CSE students, and promote computing through a variety of forms. +

+
+

+ We are a society for the students, by the students. Here’s an overview of what we do: +

-
    -
  • Run weekly social and educational events, including trivia, movie, boardgames nights, LAN parties, workshops, coding competitions, tech talks, and our famous free weekly BBQ
    • -
  • Create original media content, including Podcasts, articles, YouTube videos, and live streams
    • -
  • Run a highly successful First Year Camp and Peer Mentoring program, offering new CSE students (both undergraduate and postgraduate) a chance to meet and mingle with other newcomers
    • -
  • Engage students with industry sponsors and representatives to develop their professional capacity and curiosity
    • -
  • Develop our own open-source projects for students to get learn new skills and develop tools for our community
    • -
  • Facilitate an online community of ~8k Discord users, ~9.5k Facebook followers, ~1.9k YouTube subs, and ~7.7k Instagram followers
    • -
-
-
-
- Pinned - {/* TODO: refactor all of this */} -
-
-
- Book - - execs-directors-subcoms - -
-
CSESoc's execs, directors, subcommittees
-
+
    +
  • Run weekly social and educational events, including trivia, movie, boardgames nights, LAN parties, workshops, coding competitions, tech talks, and our famous free weekly BBQ
    • +
  • Create original media content, including Podcasts, articles, YouTube videos, and live streams
    • +
  • Run a highly successful First Year Camp and Peer Mentoring program, offering new CSE students (both undergraduate and postgraduate) a chance to meet and mingle with other newcomers
    • +
  • Engage students with industry sponsors and representatives to develop their professional capacity and curiosity
    • +
  • Develop our own open-source projects for students to get learn new skills and develop tools for our community
    • +
  • Facilitate an online community of ~8k Discord users, ~9.5k Facebook followers, ~1.9k YouTube subs, and ~7.7k Instagram followers
    • +
-
-
- Book - - constitution - + +
+ Pinned + {/* TODO: refactor all of this */} +
+
+
+ Book + + execs-directors-subcoms + +
+
CSESoc's execs, directors, subcommittees
+
-
Current and past constitutions
-
-
-
-
-
-
- Book - - our-history - +
+
+ Book + + constitution + +
+
Current and past constitutions
+
-
Dive into CSESoc's history
-
-
-
- Book - - faqs - +
+
+
+ Book + + our-history + +
+
Dive into CSESoc's history
+
+
+
+
+ Book + + faqs + +
+
Frequently asked questions
+
-
Frequently asked questions
-
-
-
-
-
- Book - - election-guide - +
+
+
+ Book + + election-guide + +
+
Our election nomination guide
+
-
Our election nomination guide
-
-
-
+
); } From ead257e29026308cf756f7d12f91f097a5ca2c3d Mon Sep 17 00:00:00 2001 From: Joye Fu Date: Tue, 22 Jul 2025 01:38:09 +1000 Subject: [PATCH 9/9] Add fade in animations --- frontend/src/components/Event/index.tsx | 45 ++++++--- frontend/src/pages/about/index.tsx | 5 +- frontend/src/pages/contact-us.tsx | 119 +++++++++++++----------- frontend/src/pages/resources.tsx | 15 ++- frontend/src/pages/sponsors.tsx | 42 +++++++-- 5 files changed, 144 insertions(+), 82 deletions(-) diff --git a/frontend/src/components/Event/index.tsx b/frontend/src/components/Event/index.tsx index dce454e..a065852 100644 --- a/frontend/src/components/Event/index.tsx +++ b/frontend/src/components/Event/index.tsx @@ -2,14 +2,27 @@ import React from 'react'; import { events } from '../../../public/data/events'; import EventsCarousel from './EventsCarousel'; import EventGallery from './EventsGallery'; +import FadeInAnimation from '../Animations/FadeInAnimation'; const Event = () => { + + const animationSequence = { + title: 0, + description: 0.1, + upcomingEventsTitle: 0.2, + upcomingEvents: 0.3, + previousEventsTitle: 0.4, + previousEvents: 0.5, + } + return (
-

EVENTS

+ +

EVENTS

+
-
+

We run a wide-variety of events for fun, learning new skills and careers. For full @@ -20,24 +33,28 @@ const Event = () => { >Facebook page!

-
-
+ +

Explore upcoming events

-
- {events.length !== 0 ? - : -
-

No upcoming events... check back here later!

-
- } -
+ + + {events.length !== 0 ? + : +
+

No upcoming events... check back here later!

+
+ } + +

Previous events

-
- + + + +
); }; diff --git a/frontend/src/pages/about/index.tsx b/frontend/src/pages/about/index.tsx index 9ec5e62..2ae603b 100644 --- a/frontend/src/pages/about/index.tsx +++ b/frontend/src/pages/about/index.tsx @@ -11,6 +11,7 @@ export default function AboutPage() { title: 0, mainContent: 0.2, sidebar: 0.2, + pinned: 0.4, } return ( @@ -83,7 +84,7 @@ export default function AboutPage() {
-
+ Pinned {/* TODO: refactor all of this */}
@@ -145,7 +146,7 @@ export default function AboutPage() {
-
+
diff --git a/frontend/src/pages/contact-us.tsx b/frontend/src/pages/contact-us.tsx index 59e8a56..abc40f0 100644 --- a/frontend/src/pages/contact-us.tsx +++ b/frontend/src/pages/contact-us.tsx @@ -1,3 +1,4 @@ +import FadeInAnimation from '@/components/Animations/FadeInAnimation'; import Contacts from '@/components/Contacts'; import Layout from '@/components/Layout'; import PageBody from '@/components/PageBody'; @@ -5,68 +6,78 @@ import PageTitle from '@/components/PageTitle'; import TabTitle from 'next/head'; export default function ContactUsPage() { + + const animationSequence = { + title: 0, + mainContent: 0.2, + } + return ( Contact Us | CSESoc UNSW - + + + - - + + + -
-

- And be sure to follow us on social media to be notified of upcoming events and - opportunities! -

- -
- +
+

+ And be sure to follow us on social media to be notified of upcoming events and + opportunities! +

+ +
+ + ); } diff --git a/frontend/src/pages/resources.tsx b/frontend/src/pages/resources.tsx index f5b16fa..b9ef245 100644 --- a/frontend/src/pages/resources.tsx +++ b/frontend/src/pages/resources.tsx @@ -3,8 +3,15 @@ import Image from 'next/image'; import { resourceCards, stage1, stage2, stage3 } from '@/../public/data/resourceCards'; import PageTitle from '@/components/PageTitle'; import TabTitle from 'next/head'; +import FadeInAnimation from '@/components/Animations/FadeInAnimation'; export default function ResourcesPage() { + + const animationSequence = { + title: 0, + mainContent: 0.2, + }; + const boxStyling = 'border border-[#595F6D] rounded-lg hover:border-[#788093] hover:bg-[#070034] hover:bg-opacity-75 transition-all duration-300'; @@ -14,11 +21,13 @@ export default function ResourcesPage() { Resources | CSESoc UNSW - + + +
-
+ Background
@@ -127,7 +136,7 @@ export default function ResourcesPage() { })}
-
+
diff --git a/frontend/src/pages/sponsors.tsx b/frontend/src/pages/sponsors.tsx index 210b0de..d378f14 100644 --- a/frontend/src/pages/sponsors.tsx +++ b/frontend/src/pages/sponsors.tsx @@ -4,6 +4,7 @@ import { diamondLinks, goldLinks, silverLinks, sponsorInfo } from '@/../public/d import SponsorModal from '@/components/Sponsors/SponsorModal'; import { EmojiRain } from 'next-emoji-rain'; import TabTitle from 'next/head'; +import FadeInAnimation from '@/components/Animations/FadeInAnimation'; export default function SponsorsPage() { const logostyle = @@ -28,6 +29,15 @@ export default function SponsorsPage() { }, 4000); }; + const animationSequence = { + diamondSponsorsTitle: 0, + diamondSponsors: 0.1, + goldSponsorsTitle: 0.2, + goldSponsors: 0.3, + silverSponsorsTitle: 0.4, + silverSponsors: 0.5, + }; + return ( @@ -44,8 +54,12 @@ export default function SponsorsPage() {
-

handleRainClick('diamond')}>DIAMOND SPONSORS

-
+ +

handleRainClick('diamond')}> + DIAMOND SPONSORS

+ +
{showModal && (
-
-

handleRainClick('gold')}>GOLD SPONSORS

-
+ + +

handleRainClick('gold')} + >GOLD SPONSORS

+ +
{goldLinks.map((item, index) => { return ( @@ -75,9 +94,14 @@ export default function SponsorsPage() { ); })}
-
-

handleRainClick('silver')}>SILVER SPONSORS

-
+ + +

handleRainClick('silver')} + >SILVER SPONSORS

+ +
{silverLinks.map((item, index) => { return ( @@ -87,7 +111,7 @@ export default function SponsorsPage() { ); })}
-
+
);