Skip to content

Commit 681e95f

Browse files
Miran-FirdausiMiran-Firdausi
committed
feat: add animations
1 parent 496ad99 commit 681e95f

File tree

4 files changed

+177
-54
lines changed

4 files changed

+177
-54
lines changed

‎src/components/AboutUs/index.jsx‎

Lines changed: 92 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
1+
import { useEffect, useRef } from "react";
2+
import { gsap } from "gsap";
3+
import { ScrollTrigger } from "gsap/ScrollTrigger";
14
import { Link } from "react-router-dom";
25
import Marquee from "react-fast-marquee";
36
import Card from "@/components/Card";
47

8+
gsap.registerPlugin(ScrollTrigger);
9+
510
export default function AboutSection() {
611
const images1 = [
712
{
@@ -79,12 +84,85 @@ export default function AboutSection() {
7984
},
8085
];
8186

87+
const paragraphRef = useRef(null);
88+
89+
useEffect(() => {
90+
const paragraph = paragraphRef.current;
91+
92+
const originalSpan = paragraph.querySelector(".text-primary");
93+
const highlightedText = originalSpan.textContent;
94+
95+
// Split all text nodes while preserving the special span
96+
const splitText = (node) => {
97+
if (node.nodeType === 3) {
98+
// Text node
99+
const letters = node.textContent.split("");
100+
const fragments = letters.map((letter) => {
101+
const span = document.createElement("span");
102+
span.className = "inline-block letter-span";
103+
span.innerHTML = letter === " " ? " " : letter;
104+
return span;
105+
});
106+
node.replaceWith(...fragments);
107+
} else if (node.classList?.contains("text-primary")) {
108+
// For highlighted text, split but add special class
109+
const letters = node.textContent.split("");
110+
const fragments = letters.map((letter) => {
111+
const span = document.createElement("span");
112+
span.className = "inline-block letter-span highlighted";
113+
span.innerHTML = letter === " " ? " " : letter;
114+
return span;
115+
});
116+
node.replaceWith(...fragments);
117+
} else {
118+
[...node.childNodes].forEach((child) => splitText(child));
119+
}
120+
};
121+
122+
// Clone the paragraph to preserve original structure
123+
const clone = paragraph.cloneNode(true);
124+
splitText(clone);
125+
paragraph.innerHTML = clone.innerHTML;
126+
127+
// Create a timeline for synchronized animations
128+
const tl = gsap.timeline({
129+
scrollTrigger: {
130+
trigger: paragraph,
131+
start: "top 80%",
132+
end: "top 20%",
133+
scrub: true,
134+
},
135+
});
136+
137+
// Animate regular text
138+
tl.fromTo(
139+
paragraph.querySelectorAll(".letter-span:not(.highlighted)"),
140+
{ color: "#595959" },
141+
{
142+
color: "#B7AB98",
143+
stagger: 0.02,
144+
},
145+
0, // Start at the beginning of the timeline
146+
);
147+
148+
// Animate highlighted text
149+
tl.fromTo(
150+
paragraph.querySelectorAll(".highlighted"),
151+
{ color: "#595959" },
152+
{
153+
color: "#E76941",
154+
stagger: 0.02,
155+
},
156+
0, // Start at the same time as regular text
157+
);
158+
}, []);
159+
82160
return (
83161
<>
84-
<section className="relative min-h-fit bg-secondary-dark text-white py-12 px-4 md:px-6 lg:px-8 overflow-hidden">
162+
<section className="relative min-h-fit bg-background-dark text-white py-12 md:px-6 lg:px-12 overflow-hidden">
85163
<div className="absolute top-4 -left-1 w-8 h-8 bg-white rounded-full opacity-100" />
86164
<div className="absolute -top-2 right-20 w-20 h-20 bg-primary-dark rounded-full opacity-100 z-10" />
87-
<div className="max-w-full mx-auto px-12 relative z-20">
165+
<div className="max-w-full mx-auto relative z-20">
88166
<h1
89167
className="text-secondary-dark shadow-black font-poppins font-extrabold text-4xl md:text-6xl lg:text-8xl mb-12 relative z-20"
90168
style={{
@@ -95,28 +173,23 @@ export default function AboutSection() {
95173
</h1>
96174

97175
<div className="mb-16 max-w-full relative">
98-
<p className="text-xl md:text-3xl font-poppins font-bold leading-relaxed">
99-
<span className="text-text-aboutuslight">
100-
Codex is the coding club at{" "}
101-
</span>
102-
<span className="text-text-aboutusorange">
176+
<p
177+
ref={paragraphRef}
178+
className="text-xl md:text-4xl md:leading-snug font-poppins font-semibold"
179+
>
180+
Codex is the coding club at{" "}
181+
<span className="text-primary">
103182
Symbiosis Institute of Technology
104-
</span>
105-
<span className="text-text-aboutuslight">
106-
{" "}
107-
that brings together students passionate about technology and
108-
programming. Our club is committed to creating an engaging
109-
environment{" "}
110-
</span>
111-
<span className="text-text-aboutusdark">
112-
where members can learn, collaborate, and grow their coding
113-
expertise through a variety of activities and events.
114-
</span>
183+
</span>{" "}
184+
that brings together students passionate about technology and
185+
programming. Our club is committed to creating an engaging
186+
environment where members can learn, collaborate, and grow their
187+
coding expertise through a variety of activities and events.
115188
</p>
116189
<Link to="/about-us">
117190
<button
118191
type="button"
119-
className="absolute -bottom-6 right-0 text-xl underline text-text-aboutuslight hover:text-text-light transition-colors"
192+
className="absolute -bottom-6 right-0 text-xl underline text-primary hover:text-text-light transition-colors"
120193
>
121194
Know More
122195
</button>

‎src/pages/About/About.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.transition-section {
2+
position: absolute;
3+
top: 50%;
4+
left: 0;
5+
width: 100%;
6+
opacity: 0;
7+
transform: translateY(50px);
8+
transition:
9+
opacity 0.8s ease,
10+
transform 0.8s ease;
11+
z-index: 0;
12+
}
13+
14+
.transition-section.visible {
15+
opacity: 1;
16+
transform: translateY(-50%);
17+
z-index: 1;
18+
}

‎src/pages/About/index.jsx‎

Lines changed: 67 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,37 @@
1-
// import React from "react";
1+
import { useEffect, useState, useRef } from "react";
22
import Heading from "@/components/Heading/index";
3+
import { gsap } from "gsap";
4+
import { ScrollTrigger } from "gsap/ScrollTrigger";
35
import Oval from "@/assets/images/About/oval.svg";
46
import PageTransition from "../../components/PageTransition";
7+
import "./About.css";
8+
9+
gsap.registerPlugin(ScrollTrigger);
510

611
function About() {
12+
const sectionRef = useRef(null);
13+
const [activeSection, setActiveSection] = useState(0); // 0: Vision, 1: Mission
14+
15+
useEffect(() => {
16+
const handleScroll = () => {
17+
// Get the current scroll position
18+
const scrollPosition = window.scrollY;
19+
const viewportHeight = window.innerHeight;
20+
21+
// Calculate which section should be active
22+
const newActiveSection = Math.floor(scrollPosition / viewportHeight);
23+
24+
setActiveSection(newActiveSection);
25+
};
26+
27+
window.addEventListener("scroll", handleScroll);
28+
29+
return () => window.removeEventListener("scroll", handleScroll);
30+
}, []);
31+
732
return (
833
<PageTransition>
9-
<div className="flex flex-col min-h-screen">
34+
<div className="flex flex-col">
1035
{/* About Us Section */}
1136
<section className="bg-secondary-dark text-text-light py-8 px-4 md:px-8">
1237
<Heading
@@ -37,46 +62,56 @@ function About() {
3762
</div>
3863
</section>
3964

40-
{/* Our Vision Section */}
41-
<section className="bg-background-light text-text-dark py-12 px-4 md:px-8 relative">
42-
<Heading
43-
text="OUR VISION"
44-
className="mb-8"
45-
frontTextStyle="text-primary"
46-
/>
47-
<div className="max-w-4xl mx-auto">
48-
<p className="text-center text-base md:text-lg mb-8">
49-
To be a leading coding club that inspires students, driving
50-
excellence in programming and technology at Symbiosis Institute of
51-
Technology and beyond.
52-
</p>
65+
<div
66+
ref={sectionRef}
67+
className="h-[100vh] relative bg-background-light text-text-dark"
68+
>
69+
{/* Vision Section */}
70+
<div
71+
className={`transition-section ${activeSection === 0 ? "visible" : ""}`}
72+
>
73+
<Heading
74+
text="OUR VISION"
75+
className="mb-8"
76+
frontTextStyle="text-primary"
77+
/>
78+
<div className="max-w-4xl mx-auto">
79+
<p className="text-center text-base md:text-lg mb-8">
80+
To be a leading coding club that inspires students, driving
81+
excellence in programming and technology at Symbiosis Institute
82+
of Technology and beyond.
83+
</p>
84+
</div>
5385
</div>
54-
</section>
5586

56-
{/* Our Mission Section */}
57-
<section className="bg-background-light text-text-dark py-12 px-4 md:px-8 relative">
58-
<Heading
59-
text="OUR MISSION"
60-
className="mb-8"
61-
frontTextStyle="text-primary"
62-
/>
63-
<div className="max-w-4xl mx-auto relative z-10">
64-
<p className="text-center text-base md:text-lg mb-8">
65-
To empower students (from beginner coders to advanced) with coding
66-
skills and knowledge through hands-on learning experiences,
67-
webinars and workshops fostering a community of innovative
68-
thinkers and problem-solvers.
69-
</p>
87+
{/* Mission Section */}
88+
<div
89+
className={`transition-section ${activeSection === 1 ? "visible" : ""}`}
90+
>
91+
<Heading
92+
text="OUR MISSION"
93+
className="mb-8"
94+
frontTextStyle="text-primary"
95+
/>
96+
<div className="max-w-4xl mx-auto">
97+
<p className="text-center text-base md:text-lg mb-8">
98+
To empower students (from beginner coders to advanced) with
99+
coding skills and knowledge through hands-on learning
100+
experiences, webinars and workshops fostering a community of
101+
innovative thinkers and problem-solvers.
102+
</p>
103+
</div>
70104
</div>
105+
71106
<img
72107
src={Oval}
73108
alt="Oval"
74109
className="w-full absolute bottom-0 left-0 z-0"
75110
/>
76-
</section>
111+
</div>
77112

78113
{/* What We Do Section */}
79-
<section className="bg-secondary-dark text-text-light py-12 px-4 md:px-8 relative">
114+
<section className="min-h-screen bg-secondary-dark text-text-light py-12 px-4 md:px-8 relative">
80115
<Heading
81116
text="WHAT WE DO?"
82117
className="mb-8"

‎tailwind.config.js‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,6 @@ export default {
2323
text: {
2424
light: "#F7F7F7",
2525
dark: "#232323",
26-
aboutuslight: "#B7AB98",
27-
aboutusdark: "#595959",
28-
aboutusorange: "#E76941"
2926
},
3027
gradient: {
3128
light: "#383838",

0 commit comments

Comments
 (0)