From c88112d2262108803db26e1a57ecb885b5d7b02b Mon Sep 17 00:00:00 2001
From: not-nullptr <needhelpwithrift@gmail.com>
Date: Sat, 16 Nov 2024 10:36:33 +0000
Subject: [PATCH] feat: badge animation

---
 src/lib/components/functional/Navbar.svelte | 36 +++++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/functional/Navbar.svelte b/src/lib/components/functional/Navbar.svelte
index 2798307..dc00da6 100644
--- a/src/lib/components/functional/Navbar.svelte
+++ b/src/lib/components/functional/Navbar.svelte
@@ -60,7 +60,7 @@
 						<Icon />
 						{#if item.badge}
 							<div
-								class="absolute -top-1 font-display -right-1 w-fit px-1.5 h-4 rounded-full bg-badge text-on-badge flex items-center justify-center font-medium"
+								class="absolute overflow-hidden grid grid-rows-1 grid-cols-1 -top-1 font-display -right-1 w-fit px-1.5 h-4 rounded-full bg-badge text-on-badge font-medium"
 								style="font-size: 0.7rem;"
 								transition:blur={{
 									blurMultiplier: 4,
@@ -72,7 +72,39 @@
 									},
 								}}
 							>
-								{item.badge}
+								{#key item.badge}
+									<div
+										class="flex items-center justify-center w-full h-full col-start-1 row-start-1"
+										in:blur={{
+											duration,
+											easing: quintOut,
+											blurMultiplier: 3,
+											y: {
+												start: -12,
+												end: 0,
+											},
+											scale: {
+												start: 0.75,
+												end: 1,
+											},
+										}}
+										out:blur={{
+											duration,
+											easing: quintOut,
+											blurMultiplier: 3,
+											y: {
+												start: 0,
+												end: 12,
+											},
+											scale: {
+												start: 1,
+												end: 0.75,
+											},
+										}}
+									>
+										{item.badge}
+									</div>
+								{/key}
 							</div>
 						{/if}
 					</div>