From 5f37d718077d939c96f79c416eb2faeea585bfbf Mon Sep 17 00:00:00 2001
From: intergrav <devin@devins.page>
Date: Sun, 19 Jul 2026 19:23:50 -0400
Subject: [PATCH] fix: image fade bugs

---
 src/lib/animations.ts | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/lib/animations.ts b/src/lib/animations.ts
index 0757399..30d66de 100644
--- a/src/lib/animations.ts
+++ b/src/lib/animations.ts
@@ -58,10 +58,13 @@ export function fadeImage(image: HTMLImageElement) {
 		if (!animationsEnabled() || !image.naturalWidth) return;
 
 		imageFadeAnimations.get(image)?.cancel();
-		const animation = image.animate([{ opacity: 0 }, { opacity: 1 }], {
-			duration: entryAnimation.duration,
-			easing: "ease-out",
-		});
+		const animation = image.animate(
+			[{ opacity: 0 }, { opacity: getComputedStyle(image).opacity }],
+			{
+				duration: entryAnimation.duration,
+				easing: "ease-out",
+			},
+		);
 		imageFadeAnimations.set(image, animation);
 		animation.onfinish = animation.oncancel = () => {
 			if (imageFadeAnimations.get(image) === animation)
@@ -69,9 +72,13 @@ export function fadeImage(image: HTMLImageElement) {
 		};
 	};
 
-	image.addEventListener("load", animate);
-	if (image.complete) animate();
-	return () => image.removeEventListener("load", animate);
+	const frame = requestAnimationFrame(() => {
+		if (!image.complete) image.addEventListener("load", animate);
+	});
+	return () => {
+		cancelAnimationFrame(frame);
+		image.removeEventListener("load", animate);
+	};
 }
 
 export function animateActivation(target: string | HTMLElement | null) {
-- 
2.54.0