feat(fallbackbadge): tweening

1 files changed, 19 insertions, 11 deletions

diff --git a/src/lib/FallbackBadge.svelte b/src/lib/FallbackBadge.svelte
index c4604263..8e5c9a5d 100644
--- a/src/lib/FallbackBadge.svelte
+++ b/src/lib/FallbackBadge.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
 	import locale from '$stores/locale';
+	import { tweened } from 'svelte/motion';
 	import type { Badge } from './Database/userBadges';
 	import Tooltip from './Tooltip/LinkedTooltip.svelte';
 	import { databaseTimeToDate } from './Utility/time';
+	import { cubicOut } from 'svelte/easing';
 
 	export let source: string | null | undefined;
 	export let alternative: string | null | undefined;
@@ -17,8 +19,13 @@
 
 	let replaceCount = 0;
 	let badgeReference: HTMLImageElement;
-	let mouseX = 0;
-	let mouseY = 0;
+	const mouse = tweened(
+		{ x: 0, y: 0 },
+		{
+			duration: 1,
+			easing: cubicOut
+		}
+	);
 
 	const delayedReplace = (event: Event, image: string | undefined | null) => {
 		if (replaceCount >= maxReplaceCount) return;
@@ -34,15 +41,16 @@
 		const boundingRectangle = badgeReference.getBoundingClientRect();
 		const factor = 1.25;
 
-		mouseX +=
-			(-(event.clientX - boundingRectangle.left - boundingRectangle.width / 2) - mouseX) * factor;
-		mouseY +=
-			(-(event.clientY - boundingRectangle.top - boundingRectangle.height / 2) - mouseY) * factor;
+		if ($mouse.x === 0 && $mouse.y === 0) $mouse = { x: event.clientX, y: event.clientY };
+
+		$mouse.x +=
+			(-(event.clientX - boundingRectangle.left - boundingRectangle.width / 2) - $mouse.x) * factor;
+		$mouse.y +=
+			(-(event.clientY - boundingRectangle.top - boundingRectangle.height / 2) - $mouse.y) * factor;
 	};
 
 	const handleMouseLeave = () => {
-		mouseX = 0;
-		mouseY = 0;
+		$mouse = { x: 0, y: 0 };
 	};
 </script>
 
@@ -61,6 +69,8 @@
 			href={'#'}
 			target="_blank"
 			class="badge-container badge"
+			on:mousemove={handleMouseMove}
+			on:mouseleave={handleMouseLeave}
 			on:click={(e) => {
 				e.preventDefault();
 
@@ -73,9 +83,7 @@
 				loading="lazy"
 				class="badge"
 				bind:this={badgeReference}
-				on:mousemove={handleMouseMove}
-				on:mouseleave={handleMouseLeave}
-				style="transform: perspective(1000px) rotateX({mouseY / 10}deg) rotateY({-mouseX /
+				style="transform: perspective(1000px) rotateX({$mouse.y / 10}deg) rotateY({-$mouse.x /
 					10}deg); ${style}"
 				on:error={(e) => delayedReplace(e, fallback)}
 			/>