add funky transition on hover

petar-i-todorov · Jan 6, 2024 · bdfe0db · bdfe0db
1 parent 8927694
commit bdfe0db
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git a/app/components/blurrable-image.tsx b/app/components/blurrable-image.tsx
@@ -26,7 +26,6 @@ export const BlurrableImage = ({
 			<img
 				{...props}
 				src={src}
-				onLoad={() => setIsLoaded(true)}
 				className={clsx(
 					{
 						hidden: !isLoaded,

diff --git a/app/root.tsx b/app/root.tsx
@@ -361,14 +361,15 @@ function App() {
 												<NavLink
 													className={({ isActive }) =>
 														clsx(
-															'font-oswald hover:brightness-[90%]',
+															'header-link relative font-oswald hover:brightness-[90%]',
 															isActive && 'text-yellow-400',
 														)
 													}
 													to={option.slug}
 													key={option.title}
 												>
 													{option.title.toUpperCase()}
+													<hr className="under-line absolute top-full block h-1 w-full rounded-full border-none bg-current" />
 												</NavLink>
 											)
 										})}
@@ -397,7 +398,10 @@ function App() {
 														to={option.slug}
 														key={option.title}
 													>
-														{option.title}
+														<span className="header-link relative">
+															{option.title}
+															<hr className="under-line absolute top-full block h-1 w-full rounded-full border-none bg-current" />
+														</span>
 													</NavLink>
 												))}
 										</div>

diff --git a/app/styles/global.css b/app/styles/global.css
@@ -28,4 +28,15 @@ html.dark {
 		--card: 213.33deg 96.92% 87.25%;
 		--card-foreground: 210deg 20% 98.04%;
 	}
+
+	.under-line {
+		clip-path: polygon(0 0, 0 100%, 0 100%, 0 0);
+		transition: clip-path 0.5s ease-in-out;
+	}
+
+	.header-link:hover {
+		.under-line {
+			clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
+		}
+	}
 }