From a6e86c38b3f5802a74f81cd978c31b80ca4a70b8 Mon Sep 17 00:00:00 2001
From: vishnuprasad2004 <vishnuprasadkorada@gmail.com>
Date: Fri, 4 Oct 2024 00:21:00 +0530
Subject: [PATCH] feat: add the typing animation using gsap

---
 frontend/package.json                  |  2 ++
 frontend/src/components/ui/Landing.jsx | 30 +++++++++++++++++++++++++-
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/frontend/package.json b/frontend/package.json
index 0dc66924..5a6e6a96 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,12 +15,14 @@
     "autoprefixer": "^10.4.19",
     "clsx": "^2.1.1",
     "framer-motion": "^11.5.6",
+    "gsap": "^3.12.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
     "react-intersection-observer": "^9.13.0",
     "react-pageflip": "^2.0.3",
     "react-router-dom": "^6.24.1",
+    "split-type": "^0.3.4",
     "tailwind-merge": "^2.5.2",
     "tailwindcss": "^3.4.4"
   },
diff --git a/frontend/src/components/ui/Landing.jsx b/frontend/src/components/ui/Landing.jsx
index 309c8c7e..b070cf90 100644
--- a/frontend/src/components/ui/Landing.jsx
+++ b/frontend/src/components/ui/Landing.jsx
@@ -1,15 +1,43 @@
 import heropic from "../../assets/landing/hero pic.jpg";
 import coffecup from "../../assets/landing/coffecup.png";
+import { useEffect, useRef } from "react";
+import SplitType from "split-type";
+import gsap from "gsap";
 
 
 export default function Landing() {
+
+  const textRef = useRef(null);
+
+  useEffect(() => {
+    const splitText = new SplitType(textRef.current, { types: "chars, words" })
+    const tl = gsap.timeline({ repeat: -1, repeatDelay: 1 });
+    
+    // Set initial opacity to 0 for all characters
+    gsap.set(splitText.chars, { opacity: 0 });
+
+    tl.to(splitText.chars, {
+      opacity: 1,
+      duration: 0.1,
+      stagger: 0.1,
+      ease: 'power1.inOut',
+    })
+    .to(splitText.chars, {
+      opacity: 0,
+      duration: 0.1,
+      stagger: 0.1,
+      ease: 'power1.inOut',
+      delay: 1
+    });
+  });
+
   return (
     <div>
       <section className="relative pb-24 h-screen-dvh w-screen bg-cover bg-center overflow-hidden">
         <div className="flex-col md:flex pt-20 z-1">
           {/* Text Content */}
           <div className="w-screen p-4 md:w-1/2 mb-6 md:mb-0 text-center md:text-left z-10 pt-14">
-            <h1 className="text-6xl md:text-9xl font-bold">
+            <h1 className="text-6xl md:text-9xl font-bold ml-4" ref={textRef}>
               A unique café experience awaits you
             </h1>
           </div>