Skip to content

Commit ead257e

Browse files
joye-fuujoye-fuu
committed
Add fade in animations
1 parent d4a825f commit ead257e

File tree

5 files changed

+144
-82
lines changed

5 files changed

+144
-82
lines changed

‎frontend/src/components/Event/index.tsx

Lines changed: 31 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,27 @@ import React from 'react';
22
import { events } from '../../../public/data/events';
33
import EventsCarousel from './EventsCarousel';
44
import EventGallery from './EventsGallery';
5+
import FadeInAnimation from '../Animations/FadeInAnimation';
56

67
const Event = () => {
8+
9+
const animationSequence = {
10+
title: 0,
11+
description: 0.1,
12+
upcomingEventsTitle: 0.2,
13+
upcomingEvents: 0.3,
14+
previousEventsTitle: 0.4,
15+
previousEvents: 0.5,
16+
}
17+
718
return (
819
<section className="py-8 xl:px-24 sm:px-10 px-5" id="events">
920
<div className="text-center my-10">
10-
<h1 className="font-bold text-6xl">EVENTS</h1>
21+
<FadeInAnimation delay={animationSequence.title}>
22+
<h1 className="font-bold text-6xl">EVENTS</h1>
23+
</FadeInAnimation>
1124
</div>
12-
<div className="flex items-center">
25+
<FadeInAnimation delay={animationSequence.description} className="flex items-center">
1326
<div className="flex flex-col text-center">
1427
<p className="text-center text-2xl">
1528
We run a wide-variety of events for fun, learning new skills and careers. For full
@@ -20,24 +33,28 @@ const Event = () => {
2033
>Facebook page</a>!
2134
</p>
2235
</div>
23-
</div>
24-
<div className="flex items-center justify-start mt-20">
36+
</FadeInAnimation>
37+
<FadeInAnimation delay={animationSequence.upcomingEventsTitle} className="flex items-center justify-start mt-20">
2538
<p className="text-4xl font-bold">
2639
Explore upcoming events
2740
</p>
28-
</div>
29-
{events.length !== 0 ?
30-
<EventsCarousel/> :
31-
<div className="flex items-center justify-center h-96">
32-
<p className="text-4xl">No upcoming events... check back here later!</p>
33-
</div>
34-
}
35-
<div className="flex items-center justify-start mt-20">
41+
</FadeInAnimation>
42+
<FadeInAnimation delay={animationSequence.upcomingEvents}>
43+
{events.length !== 0 ?
44+
<EventsCarousel/> :
45+
<div className="flex items-center justify-center h-96">
46+
<p className="text-4xl">No upcoming events... check back here later!</p>
47+
</div>
48+
}
49+
</FadeInAnimation>
50+
<FadeInAnimation delay={animationSequence.previousEventsTitle} className="flex items-center justify-start mt-20">
3651
<p className="text-4xl font-bold">
3752
Previous events
3853
</p>
39-
</div>
40-
<EventGallery />
54+
</FadeInAnimation>
55+
<FadeInAnimation delay={animationSequence.previousEvents}>
56+
<EventGallery />
57+
</FadeInAnimation>
4158
</section>
4259
);
4360
};

‎frontend/src/pages/about/index.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export default function AboutPage() {
1111
title: 0,
1212
mainContent: 0.2,
1313
sidebar: 0.2,
14+
pinned: 0.4,
1415
}
1516

1617
return (
@@ -83,7 +84,7 @@ export default function AboutPage() {
8384
</ul>
8485
</div>
8586
</FadeInAnimation>
86-
<div className="mt-10">
87+
<FadeInAnimation delay={animationSequence.pinned} className="mt-10">
8788
Pinned
8889
{/* TODO: refactor all of this */}
8990
<div className="sm:flex my-5">
@@ -145,7 +146,7 @@ export default function AboutPage() {
145146
<div className="rounded-full bg-[#E7E923] w-3 h-3" />
146147
</div>
147148
</div>
148-
</div>
149+
</FadeInAnimation>
149150
</div>
150151
</div>
151152
</div>

‎frontend/src/pages/contact-us.tsx

Lines changed: 65 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,83 @@
1+
import FadeInAnimation from '@/components/Animations/FadeInAnimation';
12
import Contacts from '@/components/Contacts';
23
import Layout from '@/components/Layout';
34
import PageBody from '@/components/PageBody';
45
import PageTitle from '@/components/PageTitle';
56
import TabTitle from 'next/head';
67

78
export default function ContactUsPage() {
9+
10+
const animationSequence = {
11+
title: 0,
12+
mainContent: 0.2,
13+
}
14+
815
return (
916
<Layout>
1017
<TabTitle>
1118
<title>Contact Us | CSESoc UNSW</title>
1219
</TabTitle>
1320

14-
<PageTitle title="CONTACT US" />
21+
<FadeInAnimation delay={animationSequence.title}>
22+
<PageTitle title="CONTACT US" />
23+
</FadeInAnimation>
1524

16-
<PageBody>
17-
<ul>
18-
<li>
19-
<h3 className="text-2xl font-semibold pt-5">
20-
For general enquiries or feedback on our society
21-
</h3>
22-
<p className="text-xl my-2">
23-
<span>Please email </span>
24-
<a className="underline" href="mailto:info@csesoc.org.au">
25-
info@csesoc.org.au
26-
</a>
27-
<span>.</span>
28-
</p>
29-
</li>
30-
<li>
31-
<h3 className="text-2xl font-semibold pt-5">For feedback on CSESoc Media</h3>
32-
<p className="text-xl my-2">
33-
<span>Please email </span>
34-
<a className="underline" href="mailto:media@csesoc.org.au">
35-
media@csesoc.org.au
36-
</a>
37-
<span>.</span>
38-
</p>
39-
</li>
40-
<li>
41-
<h3 className="text-2xl font-semibold pt-5">For enquiries about sponsorship</h3>
42-
<p className="text-xl my-2">
43-
<span>Please email </span>
44-
<a className="underline" href="mailto:sponsorship@csesoc.org.au">
45-
sponsorship@csesoc.org.au
46-
</a>
47-
<span>.</span>
48-
</p>
49-
</li>
50-
{/* <li>
51-
<h3 className="text-2xl font-semibold pt-5">For sharing opportunities with our members</h3>
52-
<p className="text-xl my-2">
53-
<span>Please fill out </span>
54-
<a className="underline" href="https://forms.gle/7kk3RRBJbXo3Sip86" target="_blank">
55-
this form
56-
</a>
57-
<span>.</span>
58-
</p>
59-
</li> */}
60-
</ul>
25+
<FadeInAnimation delay={animationSequence.mainContent}>
26+
<PageBody>
27+
<ul>
28+
<li>
29+
<h3 className="text-2xl font-semibold pt-5">
30+
For general enquiries or feedback on our society
31+
</h3>
32+
<p className="text-xl my-2">
33+
<span>Please email </span>
34+
<a className="underline" href="mailto:info@csesoc.org.au">
35+
info@csesoc.org.au
36+
</a>
37+
<span>.</span>
38+
</p>
39+
</li>
40+
<li>
41+
<h3 className="text-2xl font-semibold pt-5">For feedback on CSESoc Media</h3>
42+
<p className="text-xl my-2">
43+
<span>Please email </span>
44+
<a className="underline" href="mailto:media@csesoc.org.au">
45+
media@csesoc.org.au
46+
</a>
47+
<span>.</span>
48+
</p>
49+
</li>
50+
<li>
51+
<h3 className="text-2xl font-semibold pt-5">For enquiries about sponsorship</h3>
52+
<p className="text-xl my-2">
53+
<span>Please email </span>
54+
<a className="underline" href="mailto:sponsorship@csesoc.org.au">
55+
sponsorship@csesoc.org.au
56+
</a>
57+
<span>.</span>
58+
</p>
59+
</li>
60+
{/* <li>
61+
<h3 className="text-2xl font-semibold pt-5">For sharing opportunities with our members</h3>
62+
<p className="text-xl my-2">
63+
<span>Please fill out </span>
64+
<a className="underline" href="https://forms.gle/7kk3RRBJbXo3Sip86" target="_blank">
65+
this form
66+
</a>
67+
<span>.</span>
68+
</p>
69+
</li> */}
70+
</ul>
6171

62-
<div className="my-10">
63-
<p className="text-2xl font-semibold pt-5">
64-
And be sure to follow us on social media to be notified of upcoming events and
65-
opportunities!
66-
</p>
67-
<Contacts />
68-
</div>
69-
</PageBody>
72+
<div className="my-10">
73+
<p className="text-2xl font-semibold pt-5">
74+
And be sure to follow us on social media to be notified of upcoming events and
75+
opportunities!
76+
</p>
77+
<Contacts />
78+
</div>
79+
</PageBody>
80+
</FadeInAnimation>
7081
</Layout>
7182
);
7283
}

‎frontend/src/pages/resources.tsx

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,15 @@ import Image from 'next/image';
33
import { resourceCards, stage1, stage2, stage3 } from '@/../public/data/resourceCards';
44
import PageTitle from '@/components/PageTitle';
55
import TabTitle from 'next/head';
6+
import FadeInAnimation from '@/components/Animations/FadeInAnimation';
67

78
export default function ResourcesPage() {
9+
10+
const animationSequence = {
11+
title: 0,
12+
mainContent: 0.2,
13+
};
14+
815
const boxStyling =
916
'border border-[#595F6D] rounded-lg hover:border-[#788093] hover:bg-[#070034] hover:bg-opacity-75 transition-all duration-300';
1017

@@ -14,11 +21,13 @@ export default function ResourcesPage() {
1421
<title>Resources | CSESoc UNSW</title>
1522
</TabTitle>
1623

17-
<PageTitle title="RESOURCES" />
24+
<FadeInAnimation delay={animationSequence.title}>
25+
<PageTitle title="RESOURCES" />
26+
</FadeInAnimation>
1827

1928
<section className="bg-no-repeat bg-center py-8 px-15 min-h-screen flex justify-center items-center">
2029
<div className="2xl:w-[90rem] xl:w-[75rem] w-[90%]">
21-
<div className="relative">
30+
<FadeInAnimation delay={animationSequence.mainContent} className="relative">
2231
<Image src="assets/resources_bg.svg" alt="Background" className="-z-50 absolute" fill />
2332

2433
<div className="flex">
@@ -127,7 +136,7 @@ export default function ResourcesPage() {
127136
})}
128137
</div>
129138
</div>
130-
</div>
139+
</FadeInAnimation>
131140
</div>
132141
</section>
133142
</Layout>

‎frontend/src/pages/sponsors.tsx

Lines changed: 33 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { diamondLinks, goldLinks, silverLinks, sponsorInfo } from '@/../public/d
44
import SponsorModal from '@/components/Sponsors/SponsorModal';
55
import { EmojiRain } from 'next-emoji-rain';
66
import TabTitle from 'next/head';
7+
import FadeInAnimation from '@/components/Animations/FadeInAnimation';
78

89
export default function SponsorsPage() {
910
const logostyle =
@@ -28,6 +29,15 @@ export default function SponsorsPage() {
2829
}, 4000);
2930
};
3031

32+
const animationSequence = {
33+
diamondSponsorsTitle: 0,
34+
diamondSponsors: 0.1,
35+
goldSponsorsTitle: 0.2,
36+
goldSponsors: 0.3,
37+
silverSponsorsTitle: 0.4,
38+
silverSponsors: 0.5,
39+
};
40+
3141
return (
3242
<Layout>
3343
<TabTitle>
@@ -44,8 +54,12 @@ export default function SponsorsPage() {
4454
<EmojiRain emoji="🪩" />
4555
</div>
4656
<section className="py-8">
47-
<h2 className="text-4xl font-black text-center font-bold" onClick={() => handleRainClick('diamond')}>DIAMOND SPONSORS</h2>
48-
<div>
57+
<FadeInAnimation delay={animationSequence.diamondSponsorsTitle}>
58+
<h2 className="text-4xl font-black text-center font-bold"
59+
onClick={() => handleRainClick('diamond')}>
60+
DIAMOND SPONSORS</h2>
61+
</FadeInAnimation>
62+
<FadeInAnimation delay={animationSequence.diamondSponsors}>
4963
<div className="w-100 flex flex-col gap-16">
5064
{showModal && (
5165
<SponsorModal
@@ -63,9 +77,14 @@ export default function SponsorsPage() {
6377
})}
6478
</div>
6579
</div>
66-
</div>
67-
<h2 className="text-4xl font-black text-center font-bold" onClick={() => handleRainClick('gold')}>GOLD SPONSORS</h2>
68-
<div>
80+
</FadeInAnimation>
81+
<FadeInAnimation delay={animationSequence.goldSponsorsTitle}>
82+
<h2
83+
className="text-4xl font-black text-center font-bold"
84+
onClick={() => handleRainClick('gold')}
85+
>GOLD SPONSORS</h2>
86+
</FadeInAnimation>
87+
<FadeInAnimation delay={animationSequence.goldSponsors}>
6988
<div className="flex flex-wrap rounded-[1rem] px-14 py-10 mb-14 gap-16 justify-evenly rounded border-2 border-[#595F6D] my-10">
7089
{goldLinks.map((item, index) => {
7190
return (
@@ -75,9 +94,14 @@ export default function SponsorsPage() {
7594
);
7695
})}
7796
</div>
78-
</div>
79-
<h2 className="text-4xl font-black text-center font-bold" onClick={() => handleRainClick('silver')}>SILVER SPONSORS</h2>
80-
<div>
97+
</FadeInAnimation>
98+
<FadeInAnimation delay={animationSequence.silverSponsorsTitle}>
99+
<h2
100+
className="text-4xl font-black text-center font-bold"
101+
onClick={() => handleRainClick('silver')}
102+
>SILVER SPONSORS</h2>
103+
</FadeInAnimation>
104+
<FadeInAnimation delay={animationSequence.silverSponsors}>
81105
<div className="flex flex-wrap rounded-[1rem] px-14 py-10 mb-14 gap-16 justify-evenly rounded border-2 border-[#595F6D] mt-10">
82106
{silverLinks.map((item, index) => {
83107
return (
@@ -87,7 +111,7 @@ export default function SponsorsPage() {
87111
);
88112
})}
89113
</div>
90-
</div>
114+
</FadeInAnimation>
91115
</section>
92116
</Layout>
93117
);

0 commit comments

Comments
 (0)