pihkaal/pihkaal-me
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(gallery): prevent any interaction while animation is happening

Browse Source
This commit is contained in:
Stevan
2026-01-03 19:09:28 +01:00
parent 74d7f5ab02
commit 79f26b90d7
1 changed files with 7 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
app/pages/gallery.vue
View File

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