some improvment on animation such add delay and more functionality on…

… typeWritter-effect for dealing with cursor variant smart way
nuexq · May 16, 2024 · aaf59d9 · aaf59d9
1 parent a200f58
commit aaf59d9
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 14 deletions.
diff --git a/src/components/typewriter-effect.jsx b/src/components/typewriter-effect.jsx
@@ -1,15 +1,8 @@
 import { cn } from "@/lib/utils";
 import { motion, stagger, useAnimate, useInView } from "framer-motion";
 import { useEffect } from "react";
-import { FaStar } from "react-icons/fa";
 
-export const TypewriterEffect = ({
-  words,
-  className,
-  cursorClassName,
-  setCursorVariant,
-}) => {
-  // split text inside of words into array of characters
+export const TypewriterEffect = ({ words, className, setCursorVariant }) => {
   const wordsArray = words.map((word) => {
     return {
       ...word,
@@ -45,14 +38,14 @@ export const TypewriterEffect = ({
             `text-foreground opacity-0 hidden`,
             word.className,
           );
-          const isPrimary =
-            word.className && word.className.includes("primary");
+          const hasCursorVariant =
+            word.cursorVariant && word.cursorVariant !== "";
           const spanProps = {
             initial: {},
             className: wordClassName,
           };
-          if (isPrimary) {
-            spanProps.onMouseEnter = handleMouseEnter;
+          if (hasCursorVariant) {
+            spanProps.onMouseEnter = () => handleMouseEnter(word.cursorVariant);
             spanProps.onMouseLeave = handleMouseLeave;
           }
           return (
@@ -70,7 +63,7 @@ export const TypewriterEffect = ({
     );
   };
 
-  const handleMouseEnter = () => setCursorVariant("bigText");
+  const handleMouseEnter = (cursorVariant) => setCursorVariant(cursorVariant);
   const handleMouseLeave = () => setCursorVariant("default");
 
   return (

diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -21,6 +21,7 @@ function Home({ setCursorVariant }) {
     {
       text: "Projects",
       className: "primary text-primary dark:text-primary font-bold",
+      cursorVariant: 'bigText'
     },
   ];
 
@@ -56,7 +57,11 @@ function Home({ setCursorVariant }) {
                     key={item}
                     initial={{ width: 0 }}
                     animate={{ width: 150 }}
-                    transition={{ duration: 2, ease: [0.22, 1, 0.36, 1] }}
+                    transition={{
+                      duration: 2,
+                      ease: [0.22, 1, 0.36, 1],
+                      delay: 0.3,
+                    }}
                     className="h-[1px] bg-primary"
                   />
                 ))}