feat(projects): intro and outro animations

app/stores/projects.ts

@@ -13,6 +13,17 @@ export const useProjectsStore = defineStore("projects", {
     currentProject: 0,
     loading: true,
     offsetX: 0,
+
+    intro: {
+      fadeOpacity: 1,
+    },
+
+    outro: {
+      fadeOpacity: 0,
+    },
+
+    isIntro: true,
+    isOutro: false,
   }),
 
   actions: {
@@ -97,5 +108,44 @@ export const useProjectsStore = defineStore("projects", {
         },
       );
     },
+
+    animateIntro() {
+      this.isIntro = true;
+
+      gsap.fromTo(
+        this.intro,
+        { fadeOpacity: 1 },
+        {
+          delay: 3,
+          fadeOpacity: 0,
+          duration: 0.35,
+          ease: "none",
+          onComplete: () => {
+            this.isIntro = false;
+          },
+        },
+      );
+    },
+
+    animateOutro() {
+      this.isOutro = true;
+
+      gsap.fromTo(
+        this.outro,
+        { fadeOpacity: 0 },
+        {
+          delay: 0.5,
+          fadeOpacity: 1,
+          duration: 0.35,
+          ease: "none",
+          onComplete: () => {
+            setTimeout(() => {
+              const router = useRouter();
+              router.push({ query: {} });
+            }, 3000);
+          },
+        },
+      );
+    },
   },
 });