Add page component transitions

Author: JManion32

package-lock.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.2.0",
+    "framer-motion": "^12.35.0",
     "gsap": "^3.14.2",
     "lucide-react": "^0.564.0",
     "react": "^19.2.0",

package.json

@@ -1,16 +1,15 @@
-/* Layout that each page will follow */
 import '../css/app-layout.css';
 import { Outlet } from 'react-router-dom';
-
-import Navbar from './navbar/Navbar.tsx';
+import Navbar from './navbar/Navbar';
 
 export default function AppLayout() {
-    return (
-        <div className="main-app-container">
-            <Navbar />
-            <div className="app-content">
-                <Outlet />
-            </div>
-        </div>
-    );
-}
+
+  return (
+    <div className="main-app-container">
+      <Navbar />
+      <div className="app-content">
+            <Outlet />
+      </div>
+    </div>
+  );
+}

src/components/AppLayout.tsx

@@ -8,21 +8,23 @@ type CarouselProps = {
 export default function Carousel({ type }: CarouselProps) {
     return (
         <>
-            <div>
-                <h2 className="carousel-title">{type}</h2>
-                <div className="carousel">
-                    <Organization
-                        title="Math Club"
-                        desc="The RPI Math Faculty approved and Union affiliated math club!"
-                    />
-                    <Organization
-                        title="Math Club"
-                        desc="The RPI Math Faculty approved and Union affiliated math club!"
-                    />
-                    <Organization
-                        title="Math Club"
-                        desc="The RPI Math Faculty approved and Union affiliated math club!"
-                    />
+            <div className="carousel-container">
+                <div>
+                    <span className="carousel-title">{type}</span>
+                    <div className="carousel">
+                        <Organization
+                            title="Math Club"
+                            desc="The RPI Math Faculty approved and Union affiliated math club!"
+                        />
+                        <Organization
+                            title="Math Club"
+                            desc="The RPI Math Faculty approved and Union affiliated math club!"
+                        />
+                        <Organization
+                            title="Math Club"
+                            desc="The RPI Math Faculty approved and Union affiliated math club!"
+                        />
+                    </div>
                 </div>
             </div>
         </>

src/components/Carousel.tsx

@@ -1,14 +1,37 @@
-import { NavLink } from 'react-router-dom';
+import { NavLink, useNavigate } from 'react-router-dom';
+import type { MouseEvent } from 'react';
 
 type NavbarLinkProps = {
-    label: string;
-    nav: string;
+  label: string;
+  nav: string;
 };
 
 export default function NavbarLink({ label, nav }: NavbarLinkProps) {
-    return (
-        <NavLink to={nav} className={({ isActive }) => `navlink ${isActive ? 'active-navlink' : ''}`}>
-            {label}
-        </NavLink>
-    );
-}
+  const navigate = useNavigate();
+
+  const handleClick = (e: MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault();
+
+    const content = document.querySelector('.app-content');
+    if (!content) {
+      navigate(nav);
+      return;
+    }
+
+    content.classList.add('page-transition');
+    setTimeout(() => { navigate(nav); }, 300);
+    setTimeout(() => { content.classList.remove('page-transition'); }, 400);
+  };
+
+  return (
+    <NavLink
+      to={nav}
+      onClick={handleClick}
+      className={({ isActive }) =>
+        `navlink ${isActive ? 'active-navlink' : ''}`
+      }
+    >
+      {label}
+    </NavLink>
+  );
+}

src/components/navbar/NavbarLink.tsx

@@ -8,5 +8,13 @@
 
 .app-content {
     padding: 3rem;
-    width: 75%;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    transition: transform 0.4s ease, opacity 0.4s ease;
 }
+
+.app-content.page-transition {
+  transform: scale(0.95);
+  opacity: 0.10;
+}

src/css/app-layout.css

@@ -4,6 +4,12 @@
     gap: 4rem;
 }
 
+.carousel-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
 .carousel {
     width: 100%;
     background: var(--carousel-bg);