[feat] attempt to reduce laggy animation

components/Navbar.jsx

@@ -13,7 +13,9 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
 		open: {
 			clipPath: `circle(1920px at calc(100% - 40px) 40px)`,
 			transition: {
-				type: "tween", // Use a linear or ease transition
+				type: "spring",
+				stiffness: 400,
+				damping: 40,
 			},
 		},
 		closed: {
@@ -43,7 +45,13 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
 
 	// Check screen width and adjust clipPath for smaller screens
 	if (isMobile) {
-		navVariant.closed = {
+		(navVariant.open = {
+			clipPath: `circle(1920px at calc(100% - 40px) 40px)`,
+			transition: {
+				type: "tween",
+			},
+		}),
+			(navVariant.closed = {
 				clipPath: "circle(0px at calc(100% - 35px) 35px)",
 				transition: {
 					delay: 0.5,
@@ -51,9 +59,17 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
 					stiffness: 400,
 					damping: 40,
 				},
-		};
+			});
 	} else {
-		navVariant.closed = {
+		(navVariant.open = {
+			clipPath: `circle(1920px at calc(100% - 40px) 40px)`,
+			transition: {
+				type: "spring",
+				stiffness: 400,
+				damping: 40,
+			},
+		}),
+			(navVariant.closed = {
 				clipPath: "circle(0px at calc(100% - 120px) 35px)",
 				transition: {
 					delay: 0.5,
@@ -61,7 +77,7 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
 					stiffness: 400,
 					damping: 40,
 				},
-		};
+			});
 	}
 	const itemVariants = {
 		open: {
@@ -180,9 +196,7 @@ const Navbar = () => {
 				<div>
 					<h1
 						className={`text-2xl ml-2 md:ml-0  ${
-							isNavOpen
+							isNavOpen ? "text-white" : ""
-								? "text-white"
-								: ""
 						}`}>
 						Alvalens
 					</h1>