diff --git a/src/components/AboutUs/index.jsx b/src/components/AboutUs/index.jsx index a0c36ba..12ac5ee 100644 --- a/src/components/AboutUs/index.jsx +++ b/src/components/AboutUs/index.jsx @@ -1,7 +1,12 @@ +import { useEffect, useRef } from "react"; +import { gsap } from "gsap"; +import { ScrollTrigger } from "gsap/ScrollTrigger"; import { Link } from "react-router-dom"; import Marquee from "react-fast-marquee"; import Card from "@/components/Card"; +gsap.registerPlugin(ScrollTrigger); + export default function AboutSection() { const images1 = [ { @@ -79,12 +84,85 @@ export default function AboutSection() { }, ]; + const paragraphRef = useRef(null); + + useEffect(() => { + const paragraph = paragraphRef.current; + + const originalSpan = paragraph.querySelector(".text-primary"); + const highlightedText = originalSpan.textContent; + + // Split all text nodes while preserving the special span + const splitText = (node) => { + if (node.nodeType === 3) { + // Text node + const letters = node.textContent.split(""); + const fragments = letters.map((letter) => { + const span = document.createElement("span"); + span.className = "inline-block letter-span"; + span.innerHTML = letter === " " ? " " : letter; + return span; + }); + node.replaceWith(...fragments); + } else if (node.classList?.contains("text-primary")) { + // For highlighted text, split but add special class + const letters = node.textContent.split(""); + const fragments = letters.map((letter) => { + const span = document.createElement("span"); + span.className = "inline-block letter-span highlighted"; + span.innerHTML = letter === " " ? " " : letter; + return span; + }); + node.replaceWith(...fragments); + } else { + [...node.childNodes].forEach((child) => splitText(child)); + } + }; + + // Clone the paragraph to preserve original structure + const clone = paragraph.cloneNode(true); + splitText(clone); + paragraph.innerHTML = clone.innerHTML; + + // Create a timeline for synchronized animations + const tl = gsap.timeline({ + scrollTrigger: { + trigger: paragraph, + start: "top 80%", + end: "top 20%", + scrub: true, + }, + }); + + // Animate regular text + tl.fromTo( + paragraph.querySelectorAll(".letter-span:not(.highlighted)"), + { color: "#595959" }, + { + color: "#B7AB98", + stagger: 0.02, + }, + 0, // Start at the beginning of the timeline + ); + + // Animate highlighted text + tl.fromTo( + paragraph.querySelectorAll(".highlighted"), + { color: "#595959" }, + { + color: "#E76941", + stagger: 0.02, + }, + 0, // Start at the same time as regular text + ); + }, []); + return ( <> -
+
-
+

-

- - Codex is the coding club at{" "} - - +

+ Codex is the coding club at{" "} + Symbiosis Institute of Technology - - - {" "} - that brings together students passionate about technology and - programming. Our club is committed to creating an engaging - environment{" "} - - - where members can learn, collaborate, and grow their coding - expertise through a variety of activities and events. - + {" "} + that brings together students passionate about technology and + programming. Our club is committed to creating an engaging + environment where members can learn, collaborate, and grow their + coding expertise through a variety of activities and events.

diff --git a/src/pages/About/About.css b/src/pages/About/About.css new file mode 100644 index 0000000..2d66ff3 --- /dev/null +++ b/src/pages/About/About.css @@ -0,0 +1,18 @@ +.transition-section { + position: absolute; + top: 50%; + left: 0; + width: 100%; + opacity: 0; + transform: translateY(50px); + transition: + opacity 0.8s ease, + transform 0.8s ease; + z-index: 0; +} + +.transition-section.visible { + opacity: 1; + transform: translateY(-50%); + z-index: 1; +} diff --git a/src/pages/About/index.jsx b/src/pages/About/index.jsx index 21613a4..ea1bf1b 100644 --- a/src/pages/About/index.jsx +++ b/src/pages/About/index.jsx @@ -1,12 +1,37 @@ -// import React from "react"; +import { useEffect, useState, useRef } from "react"; import Heading from "@/components/Heading/index"; +import { gsap } from "gsap"; +import { ScrollTrigger } from "gsap/ScrollTrigger"; import Oval from "@/assets/images/About/oval.svg"; import PageTransition from "../../components/PageTransition"; +import "./About.css"; + +gsap.registerPlugin(ScrollTrigger); function About() { + const sectionRef = useRef(null); + const [activeSection, setActiveSection] = useState(0); // 0: Vision, 1: Mission + + useEffect(() => { + const handleScroll = () => { + // Get the current scroll position + const scrollPosition = window.scrollY; + const viewportHeight = window.innerHeight; + + // Calculate which section should be active + const newActiveSection = Math.floor(scrollPosition / viewportHeight); + + setActiveSection(newActiveSection); + }; + + window.addEventListener("scroll", handleScroll); + + return () => window.removeEventListener("scroll", handleScroll); + }, []); + return ( -
+
{/* About Us Section */}
- {/* Our Vision Section */} -
- -
-

- To be a leading coding club that inspires students, driving - excellence in programming and technology at Symbiosis Institute of - Technology and beyond. -

+
+ {/* Vision Section */} +
+ +
+

+ To be a leading coding club that inspires students, driving + excellence in programming and technology at Symbiosis Institute + of Technology and beyond. +

+
-
- {/* Our Mission Section */} -
- -
-

- To empower students (from beginner coders to advanced) with coding - skills and knowledge through hands-on learning experiences, - webinars and workshops fostering a community of innovative - thinkers and problem-solvers. -

+ {/* Mission Section */} +
+ +
+

+ To empower students (from beginner coders to advanced) with + coding skills and knowledge through hands-on learning + experiences, webinars and workshops fostering a community of + innovative thinkers and problem-solvers. +

+
+ Oval -
+
{/* What We Do Section */} -
+