From 32f40682729ced828403273b42b53e02a3068968 Mon Sep 17 00:00:00 2001 From: Marco Date: Thu, 30 Jul 2026 19:59:36 +0000 Subject: [PATCH] Slow down the mobile nav drawer's close animation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The shared ease-out curve (fast start, slow finish) worked well for the open reveal but made the close shrink almost instantly then linger on a barely-visible sliver — read as abrupt. Gave exit its own longer, easeInOut transition instead. Co-Authored-By: Claude Sonnet 5 --- app/components/Navbar.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx index 65762f0..fdcb474 100644 --- a/app/components/Navbar.tsx +++ b/app/components/Navbar.tsx @@ -594,7 +594,14 @@ export function Navbar({ singleActiveProduct }: { singleActiveProduct: boolean } className="lg:hidden fixed inset-0 z-40 bg-bg-base overflow-y-auto" initial={{ clipPath: "circle(0vmax at 100% 0%)" }} animate={{ clipPath: "circle(150vmax at 100% 0%)" }} - exit={{ clipPath: "circle(0vmax at 100% 0%)" }} + // Own (slower, gentler) transition for the exit — the shared + // ease-out curve above is front-loaded (fast start, slow + // finish), which reads great for the reveal but meant the + // close shrank most of the way almost immediately, then + // lingered on a barely-visible sliver — felt abrupt rather + // than smooth. easeInOut plus a longer duration spreads the + // shrink evenly instead. + exit={{ clipPath: "circle(0vmax at 100% 0%)", transition: { duration: 0.7, ease: "easeInOut" } }} transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }} >