feat(contact): intro animation

2025-11-17 00:33:37 +01:00
parent e309ffb776
commit 909eb1e7e8
18 changed files with 240 additions and 14 deletions
--- a/app/stores/contact.ts
+++ b/app/stores/contact.ts
@@ -0,0 +1,74 @@
+import gsap from "gsap";
+
+export const useContactStore = defineStore("contact", {
+  state: () => ({
+    intro: {
+      stage1Opacity: 0,
+      stage2Opacity: 0,
+      stage3Opacity: 0,
+
+      titleY: SCREEN_HEIGHT,
+
+      topBarY: -20,
+      bottomBarY: SCREEN_HEIGHT + 20,
+    },
+
+    isIntro: false,
+  }),
+
+  actions: {
+    animateIntro() {
+      this.isIntro = true;
+
+      const start = 3;
+
+      gsap.fromTo(
+        this.intro,
+        {
+          stage1Opacity: 0,
+          titleY: SCREEN_HEIGHT,
+        },
+        {
+          stage1Opacity: 1,
+          titleY: SCREEN_HEIGHT - 23,
+          duration: 0.1,
+          delay: start,
+          ease: "none",
+        },
+      );
+
+      gsap.fromTo(
+        this.intro,
+        {
+          stage2Opacity: 0,
+        },
+        {
+          stage2Opacity: 1,
+          duration: 0.1,
+          delay: start + 0.15,
+          ease: "none",
+        },
+      );
+
+      gsap.fromTo(
+        this.intro,
+        {
+          stage3Opacity: 0,
+          topBarY: -20,
+          bottomBarY: SCREEN_HEIGHT - 4,
+        },
+        {
+          stage3Opacity: 1,
+          topBarY: 0,
+          bottomBarY: SCREEN_HEIGHT - 24,
+          duration: 0.1,
+          delay: start + 0.15 + 0.15,
+          ease: "none",
+          onComplete: () => {
+            this.isIntro = false;
+          },
+        },
+      );
+    },
+  },
+});