feat(gallery): intro and outro animations

app/pages/gallery.vue

@@ -52,41 +52,127 @@ const getAspectRatio = (image: InternalApi["/api/gallery"]["get"][number]) => {
 };
 
 const isAnimating = ref(true);
+const router = useRouter();
 
-onMounted(async () => {
+const titleText = ref("");
+const descriptionText = ref("");
+const backButtonText = ref("");
+const showBackButtonIcon = ref(false);
+
+const ANIMATION_SLEEP = 0.25;
+const TITLE_DURATION = 1.4;
+const DESCRIPTION_DURATION = 1.6;
+const BACK_BUTTON_DURATION = 0.6;
+const FADE_IN_DELAY = 0.3;
+const FADE_IN_DURATION = 1.5;
+const FADE_IN_X_FACTOR = 0.15;
+const FADE_IN_Y_FACTOR = 0.075;
+
+const TITLE = "Pihkaal's Gallery";
+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,
+  duration: number,
+  reverse = false,
+  cb?: { onStart?: () => void; onComplete?: () => void },
+) =>
+  gsap.to(target, {
+    duration,
+    ease: `steps(${text.length})`,
+    onUpdate() {
+      const p = this.progress();
+      target.value = text.slice(
+        0,
+        reverse ? (1 - p) * text.length : p * text.length,
+      );
+    },
+    ...cb,
+  });
+
+const animateIntro = async () => {
   await nextTick();
 
   const scrollEl = scrollArea.value?.$el;
   if (!scrollEl) return;
 
-  const preventScroll = (e: Event) => {
+  scrollEl.addEventListener("wheel", preventScroll, { passive: false });
-    e.preventDefault();
+  scrollEl.addEventListener("touchmove", preventScroll, { passive: false });
-    e.stopPropagation();
+
-  };
+  typeText(backButtonText, BACK_BUTTON, BACK_BUTTON_DURATION, false, {
+    onStart: () => (showBackButtonIcon.value = true),
+  }).delay(ANIMATION_SLEEP + FADE_IN_DELAY);
+
+  typeText(titleText, TITLE, TITLE_DURATION).delay(
+    ANIMATION_SLEEP + FADE_IN_DELAY,
+  );
+  typeText(descriptionText, DESCRIPTION, DESCRIPTION_DURATION).delay(
+    ANIMATION_SLEEP + FADE_IN_DELAY,
+  );
+
+  await gsap.fromTo(
+    ".gallery-item",
+    { opacity: 0 },
+    {
+      opacity: 1,
+      duration: FADE_IN_DURATION,
+      delay: ANIMATION_SLEEP,
+      stagger: (i) =>
+        (Math.floor(i / lanes.value) * FADE_IN_Y_FACTOR +
+          (i % lanes.value) * FADE_IN_X_FACTOR) *
+        FADE_IN_DURATION,
+      ease: "power2.in",
+    },
+  );
+
+  isAnimating.value = false;
+  scrollEl.removeEventListener("wheel", preventScroll);
+  scrollEl.removeEventListener("touchmove", preventScroll);
+};
+
+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 });
 
-  const items = document.querySelectorAll(".gallery-item");
+  gsap.to(".gallery-item", {
-  gsap.fromTo(
+    opacity: 0,
-    items,
+    duration: FADE_IN_DURATION,
-    { opacity: 0 },
+    delay: FADE_IN_DELAY,
-    {
+    stagger: (i) =>
-      opacity: 1,
+      (Math.floor(i / lanes.value) * FADE_IN_Y_FACTOR +
-      duration: 0.6,
+        (i % lanes.value) * FADE_IN_X_FACTOR) *
-      stagger: (index) => {
+      FADE_IN_DURATION,
-        const line = Math.floor(index / lanes.value);
+    ease: "power2.out",
-        const column = index % lanes.value;
+  });
-        return line * 0.1 + column * 0.05;
+
-      },
+  typeText(backButtonText, BACK_BUTTON, BACK_BUTTON_DURATION, true, {
-      ease: "power2.out",
+    onComplete: () => (showBackButtonIcon.value = false),
-      onComplete: () => {
+  });
-        isAnimating.value = false;
+
-        scrollEl.removeEventListener("wheel", preventScroll);
+  typeText(titleText, TITLE, TITLE_DURATION, true);
-        scrollEl.removeEventListener("touchmove", preventScroll);
+
-      },
+  typeText(descriptionText, DESCRIPTION, DESCRIPTION_DURATION, true, {
+    onComplete: async () => {
+      scrollEl.removeEventListener("wheel", preventScroll);
+      scrollEl.removeEventListener("touchmove", preventScroll);
+      await sleep(ANIMATION_SLEEP * 1000);
+      router.push("/");
     },
-  );
+  });
+};
+
+onMounted(() => {
+  animateIntro();
 });
 </script>
 
@@ -109,18 +195,23 @@ onMounted(async () => {
           size="md"
           color="neutral"
           variant="link"
-          to="/"
           :ui="{
-            base: 'px-0 text-neutral-600 hover:text-neutral-400',
+            base: 'px-0 text-neutral-600 hover:text-neutral-400 h-8',
-            leadingIcon: 'size-4',
+            leadingIcon: showBackButtonIcon
+              ? 'size-4'
+              : 'size-4 text-[#0a0a0a]',
           }"
-          >Back to Home</UButton
+          @click="animateOutro"
+          >{{ backButtonText }}</UButton
         >
 
-        <h1 class="text-3xl mt-3 font-bold">Pihkaal's Gallery</h1>
+        <h1 class="text-3xl mt-3 font-bold relative">
-        <p class="text-neutral-600 text-sm mt-2 w-4/5">
+          <span class="invisible">{{ TITLE }}</span>
-          Started on March 2025. I love taking photos of plants, insects, and
+          <span class="absolute inset-0">{{ titleText }}</span>
-          arachnids.
+        </h1>
+        <p class="text-neutral-600 text-sm mt-2 w-4/5 relative">
+          <span class="invisible">{{ DESCRIPTION }}</span>
+          <span class="absolute inset-0">{{ descriptionText }}</span>
         </p>
       </header>