feat(gallery): transition to and from the nds

2026-01-04 20:53:52 +01:00
parent 7742b90c2f
commit 99e1da8e58
13 changed files with 253 additions and 14 deletions
--- a/app/stores/gallery.ts
+++ b/app/stores/gallery.ts
@@ -0,0 +1,147 @@
+import gsap from "gsap";
+import * as THREE from "three";
+
+export const useGalleryStore = defineStore("gallery", {
+  state: () => ({
+    intro: {
+      fadeOpacity: 0,
+    },
+
+    outro: {
+      fadeOpacity: 1,
+    },
+
+    isIntro: true,
+    isOutro: false,
+    shouldAnimateOutro: false,
+  }),
+
+  actions: {
+    animateIntro() {
+      const CAMERA_DELAY = 0.7;
+      const CAMERA_DURATION = 3;
+
+      const FADE_DELAY = 0;
+      const FADE_DURATION = 1;
+
+      this.isIntro = true;
+      this.isOutro = false;
+
+      const app = useAppStore();
+      if (app.camera) {
+        gsap.fromTo(
+          app.camera.position,
+          {
+            x: 0,
+            y: 10,
+            z: 12,
+          },
+          {
+            x: 0,
+            y: 3,
+            z: -1.7,
+            duration: CAMERA_DURATION,
+            delay: CAMERA_DELAY,
+            ease: "power2.inOut",
+          },
+        );
+
+        gsap.fromTo(
+          app.camera.rotation,
+          {
+            x: THREE.MathUtils.degToRad(-38.3),
+            y: 0,
+            z: 0,
+          },
+          {
+            x: THREE.MathUtils.degToRad(-25),
+            y: 0,
+            z: 0,
+            duration: CAMERA_DURATION * 0.9,
+            delay: CAMERA_DELAY,
+            ease: "power2.inOut",
+          },
+        );
+      }
+
+      gsap.fromTo(
+        this.intro,
+        { fadeOpacity: 0 },
+        {
+          fadeOpacity: 1,
+          duration: FADE_DURATION,
+          delay: FADE_DELAY,
+          ease: "none",
+        },
+      );
+
+      setTimeout(() => {
+        navigateTo("/gallery");
+      }, 3150);
+    },
+
+    animateOutro() {
+      const CAMERA_DELAY = 0;
+      const CAMERA_DURATION = 3;
+
+      const FADE_DELAY = 2.3;
+      const FADE_DURATION = 1;
+
+      this.isIntro = false;
+      this.isOutro = true;
+
+      const app = useAppStore();
+      if (app.camera) {
+        gsap.fromTo(
+          app.camera.position,
+          {
+            x: 0,
+            y: 3,
+            z: -1.7,
+          },
+          {
+            x: 0,
+            y: 10,
+            z: 12,
+            duration: CAMERA_DURATION,
+            delay: CAMERA_DELAY,
+            ease: "power2.inOut",
+          },
+        );
+
+        gsap.fromTo(
+          app.camera.rotation,
+          {
+            x: THREE.MathUtils.degToRad(-25),
+            y: 0,
+            z: 0,
+          },
+          {
+            x: THREE.MathUtils.degToRad(-38.3),
+            y: 0,
+            z: 0,
+            duration: CAMERA_DURATION * 0.9,
+            delay: CAMERA_DELAY,
+            ease: "power2.inOut",
+          },
+        );
+      }
+
+      gsap.fromTo(
+        this.outro,
+        { fadeOpacity: 1 },
+        {
+          fadeOpacity: 0,
+          duration: FADE_DURATION,
+          delay: FADE_DELAY,
+          ease: "none",
+        },
+      );
+
+      setTimeout(() => {
+        this.isOutro = false;
+        app.navigateTo("home");
+      }, 3310);
+    },
+  },
+});