From c88ad46d69b66952f3366c3483c4aad32d2f7840 Mon Sep 17 00:00:00 2001 From: Abhi-hertz <93651229+AE-Hertz@users.noreply.github.com> Date: Sun, 10 Nov 2024 14:29:38 +0530 Subject: [PATCH] bug: fixed cursor animation --- client/src/component/Cursor.jsx | 43 ++++++++++++++++++++++++--------- client/src/css/Cursor.css | 6 +++++ 2 files changed, 38 insertions(+), 11 deletions(-) diff --git a/client/src/component/Cursor.jsx b/client/src/component/Cursor.jsx index 2b54dee8..5c0be353 100644 --- a/client/src/component/Cursor.jsx +++ b/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 ( <> -
+ {[...Array(8)].map((_, i) => (