From 772ab0a5d38e75b2b53df8c663690385a213a9b1 Mon Sep 17 00:00:00 2001
From: Pihkaal <hello@pihkaal.me>
Date: Sat, 3 Jan 2026 19:09:28 +0100
Subject: [PATCH] fix(gallery): prevent any interaction while animation is
 happening

---
 app/pages/gallery.vue | 26 +++++++-------------------
 1 file changed, 7 insertions(+), 19 deletions(-)

diff --git a/app/pages/gallery.vue b/app/pages/gallery.vue
index 66dd5af..b34984a 100644
--- a/app/pages/gallery.vue
+++ b/app/pages/gallery.vue
@@ -73,8 +73,6 @@ const DESCRIPTION =
   "Started on March 2025. I love taking photos of plants, insects, and arachnids.";
 const BACK_BUTTON = "Back to Home";
 
-const preventScroll = (e: Event) => e.preventDefault();
-
 const typeText = (
   target: Ref<string>,
   text: string,
@@ -98,12 +96,6 @@ const typeText = (
 const animateIntro = async () => {
   await nextTick();
 
-  const scrollEl = scrollArea.value?.$el;
-  if (!scrollEl) return;
-
-  scrollEl.addEventListener("wheel", preventScroll, { passive: false });
-  scrollEl.addEventListener("touchmove", preventScroll, { passive: false });
-
   typeText(backButtonText, BACK_BUTTON, BACK_BUTTON_DURATION, false, {
     onStart: () => (showBackButtonIcon.value = true),
   }).delay(ANIMATION_SLEEP + FADE_IN_DELAY);
@@ -131,19 +123,12 @@ const animateIntro = async () => {
   );
 
   isAnimating.value = false;
-  scrollEl.removeEventListener("wheel", preventScroll);
-  scrollEl.removeEventListener("touchmove", preventScroll);
+  scrollArea.value?.$el.focus();
 };
 
 const animateOutro = async () => {
   isAnimating.value = true;
 
-  const scrollEl = scrollArea.value?.$el;
-  if (!scrollEl) return;
-
-  scrollEl.addEventListener("wheel", preventScroll, { passive: false });
-  scrollEl.addEventListener("touchmove", preventScroll, { passive: false });
-
   gsap.to(".gallery-item", {
     opacity: 0,
     duration: FADE_IN_DURATION,
@@ -163,8 +148,6 @@ const animateOutro = async () => {
 
   typeText(descriptionText, DESCRIPTION, DESCRIPTION_DURATION, true, {
     onComplete: async () => {
-      scrollEl.removeEventListener("wheel", preventScroll);
-      scrollEl.removeEventListener("touchmove", preventScroll);
       await sleep(ANIMATION_SLEEP * 1000);
       router.push("/");
     },
@@ -185,8 +168,9 @@ onMounted(() => {
       gap: 24,
       estimateSize: 510,
     }"
-    class="p-6 lg:p-8 xl:p-10 2xl:p-12 h-screen bg-[#0a0a0a] text-white font-[JetBrains_Mono]"
+    class="p-6 lg:p-8 xl:p-10 2xl:p-12 h-screen bg-[#0a0a0a] text-white font-[JetBrains_Mono] focus:outline-none"
     :class="{ 'no-scroll': isAnimating }"
+    tabindex="0"
   >
     <template #default="{ item: image, index }">
       <header v-if="index === 0" class="pr-2 pb-6">
@@ -277,6 +261,10 @@ onMounted(() => {
 </style>
 
 <style scoped>
+.no-scroll {
+  pointer-events: none !important;
+}
+
 .no-scroll :deep(*) {
   pointer-events: none !important;
 }