[Bug]: the cursor animation is bugged #368

client/src/component/Cursor.jsx

@@ -5,30 +5,51 @@ import '../css/Cursor.css';
 const CustomCursor = () => {
   const mainCursor = useRef(null);
   const trailingCircles = useRef([]);
+  const [isCursorVisible, setIsCursorVisible] = useState(true);
 
   useEffect(() => {
     const onMouseMove = (e) => {
-      mainCursor.current.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;
+      if (isCursorVisible) {
+        mainCursor.current.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;
 
-      trailingCircles.current.forEach((circle, index) => {
-        setTimeout(() => {
-          circle.style.transform = `translate(${e.clientX}px, ${e.clientY}px) scale(${1 - index * 0.1})`;
-        }, index * 20);
-      });
+        trailingCircles.current.forEach((circle, index) => {
+          setTimeout(() => {
+            circle.style.transform = `translate(${e.clientX}px, ${e.clientY}px) scale(${1 - index * 0.1})`;
+          }, index * 20);
+        });
+      }
     };
 
-    window.addEventListener("mousemove", onMouseMove);
-    return () => window.removeEventListener("mousemove", onMouseMove);
-  }, []);
+    const handleMouseLeave = () => {
+      setIsCursorVisible(false); 
+    };
+
+    const handleMouseEnter = () => {
+      setIsCursorVisible(true); 
+    };
+
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseleave", handleMouseLeave);
+    document.addEventListener("mouseenter", handleMouseEnter);
+
+    return () => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseleave", handleMouseLeave);
+      document.removeEventListener("mouseenter", handleMouseEnter);
+    };
+  }, [isCursorVisible]);
 
   return (
     <>
-      <div ref={mainCursor} className="main-cursor"></div>
+      <div
+        ref={mainCursor}
+        className={`main-cursor ${!isCursorVisible ? "hidden" : ""}`}
+      ></div>
       {[...Array(8)].map((_, i) => (
         <div
           key={i}
           ref={(el) => (trailingCircles.current[i] = el)}
-          className="trailing-circle"
+          className={`trailing-circle ${!isCursorVisible ? "hidden" : ""}`}
         ></div>
       ))}
     </>

client/src/css/Cursor.css

@@ -7,6 +7,7 @@
   height: 22px;
   border-radius: 50%;
   pointer-events: none;
+  transition: opacity 0.1s ease, transform 0.07s ease;
 }
 
 .main-cursor {
@@ -19,3 +20,8 @@
   z-index: 999;
   transition: transform 0.07s ease;
 }
+
+.main-cursor.hidden,
+.trailing-circle.hidden {
+  opacity: 0;
+}