From 437cfc0e79aa02c8bbdf9b004f04ea4e2610c17b Mon Sep 17 00:00:00 2001
From: Pihkaal <hello@pihkaal.me>
Date: Fri, 2 Jan 2026 14:14:15 +0100
Subject: [PATCH] fix(gallery): disable animation after resizing to avoid
 duplicate animation

---
 app/pages/gallery.vue | 30 +++++++++++++++++++++++++-----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/app/pages/gallery.vue b/app/pages/gallery.vue
index 1e80450..f7e4c99 100644
--- a/app/pages/gallery.vue
+++ b/app/pages/gallery.vue
@@ -2,8 +2,13 @@
 import { LazyGalleryModal } from "#components";
 import type { InternalApi } from "nitropack/types";
 
+// TODO: only play intro anim ONCE
+//       currently, if lane count changes, the animation is being replayed and it's shit
+
 const images = ref<InternalApi["/api/gallery"]["get"]>([]);
 
+const resized = ref(false);
+
 const scrollArea = ref();
 const overlay = useOverlay();
 const galleryModal = overlay.create(LazyGalleryModal);
@@ -26,6 +31,7 @@ const openModal = async (index: number) => {
 const lanes = ref(3);
 
 const updateLanes = () => {
+  const previousValue = lanes.value;
   if (window.innerWidth < 768) {
     lanes.value = 1;
   } else if (window.innerWidth < 1152) {
@@ -33,6 +39,10 @@ const updateLanes = () => {
   } else {
     lanes.value = 3;
   }
+
+  if (previousValue !== lanes.value) {
+    resized.value = true;
+  }
 };
 
 const { data: galleryPhotos } = await useAsyncData("gallery", () =>
@@ -94,9 +104,15 @@ onUnmounted(() => {
 
       <div
         v-else
-        class="relative overflow-hidden rounded-sm cursor-pointer gallery-item opacity-0"
-        :class="{ 'gallery-item-down': (index % lanes) % 2 === 1 }"
-        :style="{ animationDelay: `${(index % lanes) * 300}ms` }"
+        class="relative overflow-hidden rounded-sm cursor-pointer opacity-0"
+        :class="{
+          'fade-in-focus-up': (index % lanes) % 2 === 1,
+          'fade-in-focus-down': (index % lanes) % 2 === 0,
+          'no-anim': resized,
+        }"
+        :style="{
+          animationDelay: `${(index % lanes) * 300}ms`,
+        }"
         @click="openModal(index)"
       >
         <img
@@ -142,11 +158,15 @@ onUnmounted(() => {
   }
 }
 
-.gallery-item {
+.fade-in-focus-up {
   animation: fadeInFocusUp 4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
 }
 
-.gallery-item-down {
+.fade-in-focus-down {
   animation: fadeInFocusDown 4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
 }
+
+.no-anim {
+  animation-duration: 0s;
+}
 </style>