[I2 16] Add framer motion

frontend/src/components/About/AboutHomepage.tsx

@@ -1,61 +1,66 @@
 import Image from "next/image";
+import ScrollEnterAnimation from '@/components/Animations/ScrollEnterAnimation';
 
 export default function AboutHomePage() {
   return (
     <section className="py-8 pb-16 xl:px-24 sm:px-10 px-5" id="about">
-      <div className="text-center my-10">
-        <h2 className="font-bold text-6xl mb-16">ABOUT</h2>
-      </div>
-      <div className="flex justify-center items-center">
-        <div className="lg:grid grid-cols-6 flex-1 max-w-[90rem]">
-          {/* LEFT SIDE */}
-          {/* NOTE: there is slightly altered from about/index.tsx */}
-          <div className="col-span-2 md:mx-5">
-            <div className="flex items-center justify-center">
-              <Image src="/assets/csesoc_icon.svg" alt="CSESoc Icon" width={150} height={150} />
-            </div>
-            <h2 className="mt-4 text-3xl font-extrabold">CSESoc</h2>
-            <p className="text-[#727B8C] font-medium">unsw-computer-science-engineering-society</p>
-            <div className="my-4 flex gap-5">
-              <Image src="/assets/people_icon.svg" alt="People" width={20} height={20} />
-              <div>
-                16k <span className="text-[#727B8C]">members</span> · 146{' '}
-                <span className="text-[#727B8C]">internal members</span>
+      <ScrollEnterAnimation>
+        <div className="text-center my-10">
+          <h2 className="font-bold text-6xl mb-16">ABOUT</h2>
+        </div>
+      </ScrollEnterAnimation>
+      <ScrollEnterAnimation>
+        <div className="flex justify-center items-center">
+          <div className="lg:grid grid-cols-6 flex-1 max-w-[90rem]">
+            {/* LEFT SIDE */}
+            {/* NOTE: there is slightly altered from about/index.tsx */}
+            <div className="col-span-2 md:mx-5">
+              <div className="flex items-center justify-center">
+                <Image src="/assets/csesoc_icon.svg" alt="CSESoc Icon" width={150} height={150} />
+              </div>
+              <h2 className="mt-4 text-3xl font-extrabold">CSESoc</h2>
+              <p className="text-[#727B8C] font-medium">unsw-computer-science-engineering-society</p>
+              <div className="my-4 flex gap-5">
+                <Image src="/assets/people_icon.svg" alt="People" width={20} height={20} />
+                <div>
+                  16k <span className="text-[#727B8C]">members</span> · 146{' '}
+                  <span className="text-[#727B8C]">internal members</span>
+                </div>
+              </div>
+              <div className="my-4 flex gap-5">
+                <Image src="/assets/location_icon.svg" alt="Location" width={20} height={20} />
+                Sydney, Australia
+              </div>
+              <div className="flex gap-5">
+                <Image src="/assets/mail_icon.svg" alt="Mail" width={20} height={20} />
+                <a href="mailto:[email protected]" className="hover:underline">[email protected]</a>
               </div>
             </div>
-            <div className="my-4 flex gap-5">
-              <Image src="/assets/location_icon.svg" alt="Location" width={20} height={20} />
-              Sydney, Australia
-            </div>
-            <div className="flex gap-5">
-              <Image src="/assets/mail_icon.svg" alt="Mail" width={20} height={20} />
-              <a href="mailto:[email protected]" className="hover:underline">[email protected]</a>
-            </div>
-          </div>
-          {/* RIGHT SIDE */}
-          <div className="col-span-4 lg:mt-0 mt-10">
-            <p className="text-2xl">
-              We are one of the largest and most active societies at UNSW, and {" "}
-              <span className="font-bold text-[#3977F8]">the largest computing society in the southern hemisphere</span>.
-              <br/><br/>
-              CSESoc comprises {" "}
-              <span className="font-bold text-[#3977F8]">over 16k members</span> 
-              {" "}spanning across various degrees including Computer Science, 
-              Software Engineering, Bioinformatics and Computer Engineering.
-              <br/><br/>
-              We are here to fulfil the social, personal and professional needs of CSE students, 
-              and promote computing through a variety of forms.
-            </p>
-            <div className="flex pt-8 justify-center items-center">
-              <a href="about">
-                <button className="group flex justify-center items-center gap-2 pl-2 bg-white border text-blue-900 font-semibold border-[#A7A6E5] text-lg rounded-3xl w-[14rem] hover:opacity-60 xl:h-12 h-10 duration-300">
-                  Find out more...
-                </button>
-              </a>
+            {/* RIGHT SIDE */}
+            <div className="col-span-4 lg:mt-0 mt-10">
+              <p className="text-2xl">
+                We are one of the largest and most active societies at UNSW, and {" "}
+                <span className="font-bold text-[#3977F8]">the largest computing society in the southern hemisphere</span>.
+                <br/><br/>
+                CSESoc comprises {" "}
+                <span className="font-bold text-[#3977F8]">over 16k members</span> 
+                {" "}spanning across various degrees including Computer Science, 
+                Software Engineering, Bioinformatics and Computer Engineering.
+                <br/><br/>
+                We are here to fulfil the social, personal and professional needs of CSE students, 
+                and promote computing through a variety of forms.
+              </p>
+              <div className="flex pt-8 justify-center items-center">
+                <a href="about">
+                  <button className="group flex justify-center items-center gap-2 pl-2 bg-white border text-blue-900 font-semibold border-[#A7A6E5] text-lg rounded-3xl w-[14rem] hover:opacity-60 xl:h-12 h-10 duration-300">
+                    Find out more...
+                  </button>
+                </a>
+              </div>
             </div>
           </div>
         </div>
-      </div>
+      </ScrollEnterAnimation>
     </section>
   );
 }

frontend/src/components/Animations/FadeInAnimation.tsx

@@ -0,0 +1,30 @@
+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 (
+    <motion.div
+      initial={{ opacity: 0, y: yInitial }} 
+      animate={{ opacity: 1, y: 0 }}
+      transition={{
+        duration: 0.5,
+        ease: "easeOut",
+        delay,
+      }}
+      className={className}
+    >
+      {children}
+    </motion.div>
+  )
+}
+
+export default FadeInAnimation

frontend/src/components/Animations/Loading.tsx

@@ -0,0 +1,82 @@
+import React from 'react'
+import { motion } from 'framer-motion';
+
+const Loading = () => {
+  const [isLoading, setIsLoading] = React.useState(true);
+
+  // Toggling the animation durations
+  const loadDuration = 3;
+  const loadStart = 0.1;
+  const loadEnd = 0.5;
+
+  React.useLayoutEffect(() => {
+
+    // Only show loading on initial load
+    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); 
+      return timer;
+    };
+    const timer = requestAnimationFrame(() => startAnimation());
+    return () => {
+      cancelAnimationFrame(timer);
+      document.body.style.overflow = '';
+    };
+  }, []);
+
+  if (!isLoading) {
+    return null;
+  }
+
+  return (
+    <motion.div
+      initial={{ opacity: 1 }} 
+      animate={{ opacity: 0 }}
+      transition={{
+        duration: loadEnd,
+        delay: loadDuration - loadEnd, 
+      }}
+      className="fixed inset-0 bg-[#000021] z-[999] flex flex-col items-center justify-center"
+      style={{
+        willChange: 'opacity',
+      }}
+    >
+      <div className="w-96 h-3 bg-gray-700 rounded-full overflow-hidden">
+        <motion.div
+          className="h-full bg-gradient-to-r from-blue-400 to-blue-500 rounded-full"
+          initial={{ width: "0%" }}
+          animate={{ width: "100%" }}
+          transition={{
+            duration: loadDuration - loadEnd - loadStart,
+            ease: "easeInOut",
+            delay: loadStart, 
+          }}
+          style={{
+            willChange: 'width',
+          }}
+        />
+      </div>
+    </motion.div>
+  )
+}
+
+export default Loading

frontend/src/components/Animations/ScrollEnterAnimation.tsx

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react'
+import { motion } from 'framer-motion';
+
+interface ScrollEnterProps {
+  children: ReactNode;
+  delay?: number;
+  viewport?: number;
+}
+
+const ScrollEnterAnimation = ({ children, delay = 0 }: ScrollEnterProps) => {
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 50 }} 
+      whileInView={{ opacity: 1, y: 0 }}
+      transition={{
+        duration: 0.5,
+        ease: "easeOut",
+        delay,
+      }}
+      viewport={{ amount: 0.3, once: true }}
+    >
+      {children}
+    </motion.div>
+  )
+}
+
+export default ScrollEnterAnimation

frontend/src/components/Background.tsx

@@ -1,11 +1,27 @@
 import Spline from '@splinetool/react-spline';
+import { useState, useEffect } from 'react';
 
 const Background = () => {
+
+  // delay background loading
+  const [shouldLoad, setShouldLoad] = useState(false);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setShouldLoad(true);
+    }, 700); 
+
+    return () => clearTimeout(timer);
+  }, []);
+
   return (
-    <Spline
-      className="absolute"
-      scene="https://prod.spline.design/thPGkOvNXu8XjGlk/scene.splinecode"
-    />
+    <>
+      {shouldLoad && (
+        <Spline
+          scene="https://prod.spline.design/thPGkOvNXu8XjGlk/scene.splinecode"
+          renderOnDemand={true}
+        />
+      )}
+    </>
   );
 };
 

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 ScrollEnterAnimation from '../Animations/ScrollEnterAnimation';
 
 const EventBrief = () => {
   return (
     <section className="py-8 xl:px-24 sm:px-10 px-5" id="events">
-      <div className="text-center my-10">
-        <h1 className="font-bold text-6xl mb-16">UPCOMING EVENTS</h1>
-      </div>
-      {events.length !== 0 ?
-        <EventsCarousel/> :
-        <div className="flex items-center justify-center h-96">
-          <p className="text-4xl">No upcoming events... check back here later!</p>
+      <ScrollEnterAnimation>
+        <div className="text-center my-10">
+          <h1 className="font-bold text-6xl mb-16">UPCOMING EVENTS</h1>
         </div>
-      }
-      <div className="flex justify-center items-center">
-        <a href="events">
-            <button className="group flex justify-center items-center gap-2 pl-2 bg-white border text-blue-900 font-semibold border-[#A7A6E5] text-lg rounded-3xl w-[14rem] hover:opacity-60 xl:h-12 h-10 duration-300">
-              See all events
-              <ChevronRight className="group-hover:animate-bounce-right" />
-            </button>
-        </a>
-      </div>
+      </ScrollEnterAnimation>
+      <ScrollEnterAnimation>
+        {events.length !== 0 ?
+          <EventsCarousel/> :
+          <div className="flex items-center justify-center h-96">
+            <p className="text-4xl">No upcoming events... check back here later!</p>
+          </div>
+        }
+        <div className="flex justify-center items-center">
+          <a href="events">
+              <button className="group flex justify-center items-center gap-2 pl-2 bg-white border text-blue-900 font-semibold border-[#A7A6E5] text-lg rounded-3xl w-[14rem] hover:opacity-60 xl:h-12 h-10 duration-300">
+                See all events
+                <ChevronRight className="group-hover:animate-bounce-right" />
+              </button>
+          </a>
+        </div>
+      </ScrollEnterAnimation>
     </section>
   );
 };