From cb13ebd116642b9500bb7a277a35730d78a7b4e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Ca=C5=82a?= <adam.cala31@gmail.com>
Date: Wed, 8 Nov 2023 20:15:00 +0100
Subject: [PATCH] refactored framer component, added animations to homepage
 menu and fixed issue related to rendering multiple framer components at once
 (don't do it, add a delay)

---
 src/app/about/page.tsx                      | 10 ++++-
 src/app/page.tsx                            | 41 ++++++++++++++++++---
 src/components/framer/framerTextAnimate.tsx | 31 ++++++++++------
 3 files changed, 63 insertions(+), 19 deletions(-)

diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index b7d4f5f..b345029 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -10,7 +10,15 @@ const page = () => {
     <main className="w-100 m-0 h-screen">
       <Stars />
       <div className="fixed w-3/4 top-1/4 flex justify-center items-center self-center text-white text-justify">
-        <FramerTextAnimate>{aboutMeText}</FramerTextAnimate>
+        <FramerTextAnimate
+          styles={
+            "w-1/2 flex justify-between whitespace-normal tracking-wide text-3xl leading-relaxed"
+          }
+          duration={15}
+          delay={0}
+        >
+          {aboutMeText}
+        </FramerTextAnimate>
       </div>
     </main>
   );
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 4ccd570..d1ec954 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,21 +1,50 @@
 import Stars from "@/components/stars";
 import Skeleton from "@/components/mesh/skeleton";
 import Link from "next/link";
-import { Suspense } from "react";
+import FramerTextAnimate from "@/components/framer/framerTextAnimate";
+
+const about = "ABOUT ME";
+const models = "MY MODELS";
+const contact = "CONTACT ME";
 
 export default function Home() {
   return (
     <main className="w-100 m-0 h-screen">
       <Stars />
-      <div className="fixed z-50 flex flex-col content-start text-left top-1/2 left-1/4 gap-5 text-white">
-        <Link className="text-5xl  hover:text-shadow" href={"/about"}>
-          ABOUT ME
+
+      <div className="fixed z-50 flex flex-col content-start text-left top-1/3 left-1/4 gap-5 mt-20 text-white">
+        <Link href={"/about"}>
+          <FramerTextAnimate
+            styles={
+              "whitespace-normal tracking-wide text-6xl leading-relaxed hover:text-shadow"
+            }
+            duration={2}
+            delay={0.5}
+          >
+            {about}
+          </FramerTextAnimate>
         </Link>
         <Link className="text-5xl hover:text-shadow" href={"/models"}>
-          MY MODELS
+          <FramerTextAnimate
+            styles={
+              "whitespace-normal tracking-wide text-6xl leading-relaxed hover:text-shadow"
+            }
+            duration={2}
+            delay={1}
+          >
+            {models}
+          </FramerTextAnimate>
         </Link>
         <Link className="text-5xl hover:text-shadow" href={"/contact"}>
-          CONTACT
+          <FramerTextAnimate
+            styles={
+              "whitespace-normal tracking-wide text-6xl leading-relaxed hover:text-shadow"
+            }
+            duration={2}
+            delay={1.5}
+          >
+            {contact}
+          </FramerTextAnimate>
         </Link>
         <div className=" fixed h-screen w-1/2 right-0 top-0">
           <Skeleton />
diff --git a/src/components/framer/framerTextAnimate.tsx b/src/components/framer/framerTextAnimate.tsx
index 70d818d..bab058f 100644
--- a/src/components/framer/framerTextAnimate.tsx
+++ b/src/components/framer/framerTextAnimate.tsx
@@ -1,15 +1,19 @@
 "use client";
 
-import { Center } from "@react-three/drei";
 import { animate, motion, useMotionValue, useTransform } from "framer-motion";
 import { Special_Elite } from "next/font/google";
 import React, { useEffect } from "react";
 
 const special_elite = Special_Elite({ weight: "400", subsets: ["latin"] });
 
-type props = { children: string };
+type props = {
+  children: string;
+  styles: string;
+  duration: number;
+  delay: number;
+};
 
-const FramerTextAnimate = ({ children }: props) => {
+const FramerTextAnimate = ({ children, styles, duration, delay }: props) => {
   const count = useMotionValue(0);
   const baseText = children as string;
 
@@ -19,19 +23,22 @@ const FramerTextAnimate = ({ children }: props) => {
   );
 
   useEffect(() => {
-    const controls = animate(count, baseText.length, {
-      //   type: "tween", // Not really needed because adding a duration will force "tween"
-      duration: 15,
-      ease: "easeInOut",
-    });
-    return controls.stop;
+    // Delay the animation start
+    const delayTimeout = setTimeout(() => {
+      const controls = animate(count, baseText.length, {
+        duration: duration,
+        ease: "easeInOut",
+      });
+      return () => controls.stop();
+    }, delay * 1000);
+
+    // Clear the timeout on unmount to prevent memory leaks
+    return () => clearTimeout(delayTimeout);
   }, []);
 
   return (
     <>
-      <motion.span
-        className={`${special_elite.className} w-1/2 flex justify-between whitespace-normal tracking-wide text-3xl leading-relaxed`}
-      >
+      <motion.span className={`${special_elite.className} ${styles}`}>
         {displayText}
       </motion.span>
     </>