pgobin/adjust landing page animations

src/components/landing-page/(AboutSectionComponents)/FlyingHusky.tsx

@@ -15,8 +15,8 @@ export default function FlyingHusky() {
         });
 
         gsap.to(".flyingHusky", {
-            delay: 0.8,
-            duration: 1.5,
+            delay: 0.3,
+            duration: 1.2,
             x: 0,
             y: 0,
             rotation: 0,
@@ -27,20 +27,20 @@ export default function FlyingHusky() {
                     { x: "-80vw", y: "40vh", rotation: "-20deg", scale: 0.75 },
                     { x: "-40vw", y: "-30vh", rotation: "10deg", scale: 0.85 },
                     { x: "-20vw", y: "-20vh", rotation: "5deg", scale: 0.9 },
-                    { x: "-10vw", y: "-10vh", rotation: 0, scale: 0.95 },
-                    { x: 0, y: 0, rotation: 0, scale: 1 },
+                    { x: "-10vw", y: "-10vh", rotation: "0deg", scale: 0.95 },
+                    { x: 0, y: 0, rotation: "0deg", scale: 1 },
                 ],
                 curviness: 1.5,
                 autoRotate: true,
             },
             scrollTrigger: {
-                trigger: ".aboutSectionContainer",
-                start: "top 80%",
+                trigger: "#aboutPanel",
+                start: "30% 80%",
             },
         });
 
         gsap.to(".flyingHusky", {
-            delay: 2,
+            delay: 1.35,
             repeat: -1,
             duration: 2.25,
             ease: "linear",

src/components/landing-page/(AboutSectionComponents)/FunFacts/FunFact.tsx

@@ -15,14 +15,14 @@ export default function FunFact({ src, alt }: FunFactProps) {
         gsap.set(".funFact", { scale: 0, rotate: 0 });
 
         gsap.to(".funFact", {
-            delay: 0.7,
+            delay: 0.2,
             stagger: 0.2,
             duration: 0.35,
             ease: "bounce",
             scale: 1,
             scrollTrigger: {
                 trigger: "#funFactsContainer",
-                start: "65% 90%",
+                start: "30% 80%",
             },
         });
     }, []);

src/components/landing-page/(AboutSectionComponents)/Panel/Content.tsx

@@ -6,35 +6,38 @@ import ScrollTrigger from "gsap/ScrollTrigger";
 gsap.registerPlugin(ScrollTrigger);
 
 type PanelContentProps = {
+    parentPanelId: string;
     children: React.ReactNode;
     className?: string;
 };
 
 export default function PanelContent({
+    parentPanelId,
     children,
     className,
 }: PanelContentProps) {
     const panelContentRef = useRef(null);
 
     useEffect(() => {
-        if (!panelContentRef) return;
+        if (!panelContentRef.current) return;
 
         const panelContent = panelContentRef.current;
 
         gsap.set(panelContent, { scale: 0.1, opacity: 0 });
 
         gsap.to(panelContent, {
-            delay: 0.4,
+            delay: 0.3,
             scale: 1,
             opacity: 1,
-            duration: 0.3,
-            ease: "power2.in",
+            duration: 0.2,
+            ease: "expo.out",
             scrollTrigger: {
-                trigger: panelContent,
-                start: "70% 90%",
+                trigger: `#${parentPanelId}`,
+                start: "30% 80%",
             },
         });
-    }, []);
+        // parentPanelId only passed into dependency array to satisfy ESLint. value of parentPanelId will never be changed within this component
+    }, [parentPanelId]);
 
     return (
         <div ref={panelContentRef} className={clsx("p-6 md:p-10", className)}>

src/components/landing-page/(AboutSectionComponents)/Panel/Header.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from "react";
+import React, { useEffect, useRef } from "react";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import gsap from "gsap";
@@ -7,13 +7,15 @@ import { ScrollTrigger } from "gsap/ScrollTrigger";
 gsap.registerPlugin(ScrollTrigger);
 
 type PanelHeaderProps = {
+    parentPanelId: string;
     children: React.ReactNode;
     isSectionHeader?: boolean;
     className?: string;
     as?: "h1" | "h2" | "h3" | undefined;
 };
 
 export default function PanelHeader({
+    parentPanelId,
     children,
     isSectionHeader = false,
     className,
@@ -22,29 +24,23 @@ export default function PanelHeader({
     const headerRef = useRef(null);
 
     useEffect(() => {
-        const header = headerRef.current;
+        if (!headerRef.current) return;
 
-        if (header) {
-            gsap.set(header, { y: "-100%" });
+        const header = headerRef.current;
 
-            const animation = gsap.to(header, {
-                duration: 0.4,
-                ease: "power2.out",
-                y: 0,
-                scrollTrigger: {
-                    trigger: header,
-                    start: "bottom 65%",
-                },
-            });
+        gsap.set(header, { y: "-100%" });
 
-            return () => {
-                if (animation.scrollTrigger) {
-                    animation.scrollTrigger.kill();
-                }
-                animation.kill();
-            };
-        }
-    }, []);
+        gsap.to(header, {
+            duration: 0.2,
+            ease: "expo.out",
+            y: 0,
+            scrollTrigger: {
+                trigger: `#${parentPanelId}`,
+                start: "30% 80%",
+            },
+        });
+        // parentPanelId only passed into dependency array to satisfy ESLint. value of parentPanelId will never be changed within this component
+    }, [parentPanelId]);
 
     const props = {
         ref: headerRef,

src/components/landing-page/(AboutSectionComponents)/Panel/Panel.tsx

@@ -7,6 +7,7 @@ import { ScrollTrigger } from "gsap/ScrollTrigger";
 gsap.registerPlugin(ScrollTrigger);
 
 type PanelProps = {
+    id: string;
     children: React.ReactNode;
     className?: string;
     panelBackground?: string;
@@ -15,6 +16,7 @@ type PanelProps = {
 
 export default function Panel({
     children,
+    id,
     className = "",
     panelBackground,
     panelColor,
@@ -33,6 +35,7 @@ export default function Panel({
 
     return (
         <div
+            id={id}
             className={twMerge(
                 clsx(
                     "relative w-full border-black border-[3px] bg-cover bg-center overflow-hidden",

src/components/landing-page/(TracksSectionComponents)/MysteryBox.tsx

@@ -57,7 +57,7 @@ export default function MysteryBox({
 
         if (!tlRef.current || !mysteryBox || !mysteryBoxLid) return;
 
-        tlRef.current.kill();
+        tlRef.current.clear();
         tlRef.current = gsap.timeline();
         tlRef.current.to(mysteryBox, { x: 0, rotate: 0 });
         tlRef.current.to(mysteryBox, {

src/components/landing-page/AboutSection.tsx

@@ -20,9 +20,6 @@ import FunFact from "./(AboutSectionComponents)/FunFacts/FunFact";
 // For Hackeroons Panel
 import HackeroonCarousel from "./(AboutSectionComponents)/HackeroonCarousel/Carousel";
 
-// for Leaderboard panel
-// import LeaderboardRecord from "./(AboutSectionComponents)/LeaderboardRecord";
-
 // For Last Years Winners panel
 import LastYearsWinnersRecord from "./(AboutSectionComponents)/LastYearsWinnersRecord";
 import { Prize } from "@/src/util/dataTypes";
@@ -36,13 +33,15 @@ const AboutSection: React.FC<{ hackeroonPrizes: Promise<Prize[]> }> = ({
         <section>
             {/* UWBHacks About Container */}
             <Panel
-                className={`${panelMargin} aboutSectionContainer`}
+                id="aboutPanel"
+                className={`${panelMargin}`}
                 panelBackground={
                     "/about/backgrounds/AboutSection_Background_1.jpg"
                 }
             >
                 {/* UWBHacks About Section Header */}
                 <PanelHeader
+                    parentPanelId="aboutPanel"
                     as="h2"
                     isSectionHeader
                     className="z-[5] lg:absolute"
@@ -51,7 +50,10 @@ const AboutSection: React.FC<{ hackeroonPrizes: Promise<Prize[]> }> = ({
                 </PanelHeader>
 
                 {/* UWBHacks About Section Content */}
-                <PanelContent className="z-[5] flex flex-col md:flex-row justify-center items-center gap-x-8 gap-y-4 overflow-hidden">
+                <PanelContent
+                    parentPanelId="aboutPanel"
+                    className="z-[5] flex flex-col md:flex-row justify-center items-center gap-x-8 gap-y-4 overflow-hidden"
+                >
                     <FlyingHusky />
 
                     {/* UWBHacks About Section Description */}
@@ -90,9 +92,13 @@ const AboutSection: React.FC<{ hackeroonPrizes: Promise<Prize[]> }> = ({
             </Panel>
 
             {/* Previous UWBHacks Fun Statistics Container */}
-            <Panel className={`w-full border-none ${panelMargin}`}>
+            <Panel
+                id="funFactsPanel"
+                className={`w-full border-none ${panelMargin}`}
+            >
                 <div className="flex justify-center">
                     <PanelHeader
+                        parentPanelId="funFactsPanel"
                         as="h2"
                         className="font-h1 text-white bg-transparent border-none p-0"
                     >
@@ -124,16 +130,20 @@ const AboutSection: React.FC<{ hackeroonPrizes: Promise<Prize[]> }> = ({
 
             {/* UWB ACM Description Container */}
             <Panel
+                id="uwbacmDescriptionPanel"
                 className={`mt-12 md:mt-16 ${panelMargin}`}
                 panelBackground="/about/backgrounds/AboutSection_Background_2.jpg"
             >
                 {/* UWBHacks ACM Description Header */}
-                <PanelHeader as="h2">
+                <PanelHeader parentPanelId="uwbacmDescriptionPanel" as="h2">
                     UWB Association for Computing Machinery
                 </PanelHeader>
 
                 {/* UWB ACM Description Content */}
-                <PanelContent className="flex justify-center items-center">
+                <PanelContent
+                    parentPanelId="uwbacmDescriptionPanel"
+                    className="flex justify-center items-center"
+                >
                     <div className="z-[5] w-4/5 md:w-3/4 lg:w-3/5 flex flex-col xl:flex-row xl:gap-x-4 self-center p-6 bg-white border-2 border-black">
                         <p className="font-semibold text-center md:text-left">
                             UWB ACM is a chapter of the Association of Computing
@@ -169,13 +179,16 @@ const AboutSection: React.FC<{ hackeroonPrizes: Promise<Prize[]> }> = ({
             <div className={`w-full grid md:grid-cols-2 gap-8 ${panelMargin}`}>
                 {/* Month of Hacking */}
                 <Panel
+                    id="monthOfHackingPanel"
                     panelBackground={
                         "/about/backgrounds/AboutSection_Background_3.jpg"
                     }
                     className="flex flex-col justify-between"
                 >
-                    <PanelHeader as="h2">Month of Hacking</PanelHeader>
-                    <PanelContent>
+                    <PanelHeader parentPanelId="monthOfHackingPanel" as="h2">
+                        Month of Hacking
+                    </PanelHeader>
+                    <PanelContent parentPanelId="monthOfHackingPanel">
                         <p className="text-center font-bold md:text-lg">
                             In{" "}
                             <span className="font-h1 text-blue-700 tracking-wider px-[2px] text-xl md:text-2xl">
@@ -197,13 +210,19 @@ const AboutSection: React.FC<{ hackeroonPrizes: Promise<Prize[]> }> = ({
                     </PanelContent>
                 </Panel>
 
-                {/* Last Year's Prizes */}
+                {/* Last Year's Winners */}
                 <Panel
+                    id="lastYearsWinnersPanel"
                     className="flex flex-col"
                     panelBackground="/about/backgrounds/AboutSection_Background_4.jpg"
                 >
-                    <PanelHeader as="h2">Last Year&apos;s Projects</PanelHeader>
-                    <PanelContent className="h-full flex flex-col justify-around gap-y-4">
+                    <PanelHeader parentPanelId="lastYearsWinnersPanel" as="h2">
+                        Last Year&apos;s Projects
+                    </PanelHeader>
+                    <PanelContent
+                        parentPanelId="lastYearsWinnersPanel"
+                        className="h-full flex flex-col justify-around gap-y-4"
+                    >
                         <LastYearsWinnersRecord
                             name={"LoveStorying"}
                             linkedInPost={
@@ -222,10 +241,15 @@ const AboutSection: React.FC<{ hackeroonPrizes: Promise<Prize[]> }> = ({
                 </Panel>
 
                 {/* Hackeroons */}
-                <Panel panelBackground="/about/backgrounds/AboutSection_Background_4.jpg">
-                    <PanelHeader as="h2">Hackeroons</PanelHeader>
+                <Panel
+                    id="hackeroonPrizesPanel"
+                    panelBackground="/about/backgrounds/AboutSection_Background_4.jpg"
+                >
+                    <PanelHeader parentPanelId="hackeroonPrizesPanel" as="h2">
+                        Hackeroons
+                    </PanelHeader>
 
-                    <PanelContent>
+                    <PanelContent parentPanelId="hackeroonPrizesPanel">
                         {/* Hackeroon Prizes Carousel */}
                         <Suspense>
                             <HackeroonCarousel
@@ -242,9 +266,18 @@ const AboutSection: React.FC<{ hackeroonPrizes: Promise<Prize[]> }> = ({
                 </Panel>
 
                 {/* Leaderboard */}
-                <Panel panelColor={"#f5be58"} className="flex flex-col">
-                    <PanelHeader as="h2">Leaderboard</PanelHeader>
-                    <PanelContent className="h-full flex justify-center items-center font-h1 text-3xl md:text-4xl text-blue-500 tracking-widest">
+                <Panel
+                    id="leaderboardPanel"
+                    panelColor={"#f5be58"}
+                    className="flex flex-col"
+                >
+                    <PanelHeader parentPanelId="leaderboardPanel" as="h2">
+                        Leaderboard
+                    </PanelHeader>
+                    <PanelContent
+                        parentPanelId="leaderboardPanel"
+                        className="h-full flex justify-center items-center font-h1 text-3xl md:text-4xl text-blue-500 tracking-widest"
+                    >
                         {/* TODO: get top 3 hackathon participants with highest hackeroon count and use LeaderboardRecord to display */}
                         <div className="bg-white p-5 rounded-md border-black border-2 shadow-[5px_5px_0_rgba(0,0,0,1)]">
                             Coming soon!

src/components/landing-page/MeetTheTeamSection.tsx

@@ -20,16 +20,20 @@ const MeetTheTeamSection = () => {
     );
 
     return (
-        <Panel panelColor="white" className={panelMargin}>
+        <Panel id="meetTheTeamPanel" panelColor="white" className={panelMargin}>
             {/* Heading */}
             <PanelHeader
+                parentPanelId="meetTheTeamPanel"
                 className="text-[#49B2F8] border-none lg:w-full pb-0 bg-transparent"
                 isSectionHeader
             >
                 Meet the League
             </PanelHeader>
 
-            <PanelContent className="space-y-8">
+            <PanelContent
+                parentPanelId="meetTheTeamPanel"
+                className="space-y-8"
+            >
                 {/* Tabs */}
                 <CommitteeTabs
                     committees={committees}