Merge pull request #191 from Hamza1821/addedGsap

[UI Enhancement] : added Gsap animation to navbar and home page fixes #134

Author: abhishekraoas

client/package-lock.json

@@ -17,6 +17,7 @@
     "@heroicons/react": "^2.1.5",
     "@mui/material": "^6.1.2",
     "client": "file:",
+    "gsap": "^3.12.5",
     "mdb-react-ui-kit": "^9.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

client/package.json

@@ -1,13 +1,41 @@
-import React, { useState } from "react";
+import React, { useState,useEffect } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { useAuth } from "../middleware/AuthContext";
 import ThemeToggle from "./ThemeToggle";
+import gsap from 'gsap'
+import {tl} from './gsap.js'
 
 const Header = () => {
   const [isOpen, setIsOpen] = useState(false);
   const { user, logout } = useAuth();
   const navigate = useNavigate();
 
+//gsap starts
+useEffect(() => {
+    const ctx = gsap.context(() => {
+    tl.fromTo('.navGsap',
+      {
+        y: -100, // Starting position (from)
+        opacity: 0, // Starting opacity (from)
+      },
+      {
+        y: 0, // Ending position (to)
+        opacity: 1, // Ending opacity (to)
+        duration: 0.5, // Animation duration
+        ease: "sine.in", // Easing function
+        stagger: 0.1, 
+        
+      }
+    );
+  });
+
+  return () => ctx.revert(); // Cleanup when the component unmounts
+}, []);
+
+//gsap ends
+
+
+
   const handleLogout = () => {
     logout();
     navigate("/login");
@@ -17,8 +45,8 @@ const Header = () => {
     <header className="bg-black text-white shadow-lg">
       <div className="container mx-auto flex justify-between items-center px-6 py-4">
         {/* Logo */}
-        <div>
-          <a href="/" className="text-xl font-bold text-white">
+        <div className="navGsap">
+          <a href="/" className=" text-xl font-bold text-white">
             MCA Alumni Network
           </a>
         </div>
@@ -27,25 +55,25 @@ const Header = () => {
         <nav className="hidden md:flex space-x-4 lg:space-x-6 text-base font-medium">
           <Link
             to="/"
-            className="relative text-white px-3 py-2 rounded-lg hover:text-gray-300 transition duration-300 ease-in-out hover:scale-110"
+            className="navGsap relative text-white px-3 py-2 rounded-lg hover:text-gray-300 transition duration-300 ease-in-out hover:scale-110"
           >
             Home
           </Link>
           <Link
             to="/about-us"
-            className="relative text-white px-3 py-2 rounded-lg hover:text-gray-300 transition duration-300 ease-in-out hover:scale-110"
+            className="navGsap relative text-white px-3 py-2 rounded-lg hover:text-gray-300 transition duration-300 ease-in-out hover:scale-110"
           >
             About Us
           </Link>
           <Link
             to="/alumni"
-            className="relative text-white px-3 py-2 rounded-lg hover:text-gray-300 transition duration-300 ease-in-out hover:scale-110"
+            className="navGsap relative text-white px-3 py-2 rounded-lg hover:text-gray-300 transition duration-300 ease-in-out hover:scale-110"
           >
             Our Alumni
           </Link>
           <Link
             to="/contact-us"
-            className="relative text-white px-3 py-2 rounded-lg hover:text-gray-300 transition duration-300 ease-in-out hover:scale-110"
+            className="navGsap relative text-white px-3 py-2 rounded-lg hover:text-gray-300 transition duration-300 ease-in-out hover:scale-110"
           >
             Contact Us
           </Link>
@@ -55,13 +83,13 @@ const Header = () => {
             <>
               <Link
                 to="/user/dashboard"
-                className="relative text-white px-3 py-2 rounded-lg hover:text-gray-300 transition duration-300 ease-in-out hover:scale-110"
+                className="navGsap relative text-white px-3 py-2 rounded-lg hover:text-gray-300 transition duration-300 ease-in-out hover:scale-110"
               >
                 Dashboard
               </Link>
               <button
                 onClick={handleLogout}
-                className="relative text-white px-3 py-2 rounded-lg hover:text-gray-300 transition duration-300 ease-in-out hover:scale-110"
+                className="navGsap relative text-white px-3 py-2 rounded-lg hover:text-gray-300 transition duration-300 ease-in-out hover:scale-110"
               >
                 Logout
               </button>
@@ -70,13 +98,13 @@ const Header = () => {
             <>
               <Link
                 to="/register"
-                className="relative text-white px-3 py-2 rounded-lg hover:text-gray-300 transition duration-300 ease-in-out hover:scale-110"
+                className="navGsap relative text-white px-3 py-2 rounded-lg hover:text-gray-300 transition duration-300 ease-in-out hover:scale-110"
               >
                 Register as Alumni
               </Link>
               <Link
                 to="/login"
-                className="relative text-white px-3 py-2 rounded-lg hover:text-gray-300 transition duration-300 ease-in-out hover:scale-110"
+                className="navGsap relative text-white px-3 py-2 rounded-lg hover:text-gray-300 transition duration-300 ease-in-out hover:scale-110"
               >
                 Log In
               </Link>

client/src/components/Header.jsx

@@ -20,6 +20,8 @@ import {
 } from "react-icons/fa"; // Import social media icons
 import ImageWithCursorEffect from "./ImageWithCursorEffect";
 import Testimonials from "./Testimonial/Testimonial";
+import gsap from 'gsap'
+
 
 const Home = () => {
   const navigate = useNavigate(); // Initialize navigate for redirection
@@ -30,6 +32,39 @@ const Home = () => {
   const descriptionText =
     "Empowering connections among MCA alumni to foster collaboration, mentorship, and professional growth within a dynamic and supportive community.";
 
+    useEffect(() => {
+      const ctx = gsap.context(() => {
+        // Ensure initial styles are set to scale 1 and opacity 1
+       
+  
+        // Timeline for animation
+        const tl = gsap.timeline();
+        tl.fromTo('.homeGsap',
+          {
+            scale: 0, // Starting position (from)
+            opacity: 0, // Starting opacity (from)
+          },
+          {
+            scale: 1, // Ending position (to)
+            opacity: 1, // Ending opacity (to)
+            duration: 1, // Animation duration
+            ease: "expo.inOut", // Easing function
+            stagger: 0.3, 
+           
+          }
+        );
+      });
+
+     
+  
+      // Cleanup GSAP context
+      return () => {
+        ctx.revert();
+      };
+    }, []); 
+
+
+
   useEffect(() => {
     const interval = setInterval(() => {
       if (isTyping) {
@@ -81,7 +116,8 @@ const Home = () => {
         />
 
         {/* Left Section - Description and Buttons */}
-        <Box sx={{ zIndex: 2, textAlign: "left", maxWidth: "45%" }}>
+        <Box sx={{ zIndex: 2, textAlign: "left", maxWidth: "45%",transform: "scale(1)", // Adding scale
+    opacity: 1,  }} className="homeGsap ">
           <motion.div
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}

client/src/components/Home.jsx

@@ -0,0 +1,2 @@
+import gsap from 'gsap'
+export const tl=gsap.timeline()