feat(achievements): black fade in and out from home and settings screen

app/stores/achievementsScreen.ts

@@ -2,9 +2,14 @@ import gsap from "gsap";
 
 export const useAchievementsScreen = defineStore("achievementsScreen", {
   state: () => ({
+    fadeToBlack: {
+      opacity: 0,
+      active: false,
+      isOutro: false,
+    },
+
     intro: {
       stage1Opacity: 0,
-      stage2Opacity: 0,
       itemOffsets: {} as Record<number, number>,
       progressBar: 0,
     },
@@ -12,7 +17,6 @@ export const useAchievementsScreen = defineStore("achievementsScreen", {
     outro: {
       stage1Opacity: 1,
       stage2Opacity: 1,
-      stage3Opacity: 1,
     },
 
     isIntro: true,
@@ -20,6 +24,51 @@ export const useAchievementsScreen = defineStore("achievementsScreen", {
   }),
 
   actions: {
+    animateFadeToBlackIntro() {
+      this.fadeToBlack.active = true;
+      this.fadeToBlack.isOutro = false;
+
+      gsap
+        .timeline({
+          onComplete: () => {
+            const app = useAppStore();
+            app.navigateTo("achievements");
+          },
+        })
+        .fromTo(
+          this.fadeToBlack,
+          { opacity: 0 },
+          {
+            opacity: 1,
+            duration: 0.4,
+            ease: "none",
+          },
+        );
+    },
+
+    animateFadeToBlackOutro() {
+      this.fadeToBlack.active = true;
+      this.fadeToBlack.isOutro = true;
+      this.fadeToBlack.opacity = 1;
+
+      gsap
+        .timeline({
+          onComplete: () => {
+            this.fadeToBlack.active = false;
+            this.isOutro = false;
+          },
+        })
+        .fromTo(
+          this.fadeToBlack,
+          { opacity: 1 },
+          {
+            opacity: 0,
+            duration: 0.4,
+            ease: "none",
+          },
+        );
+    },
+
     animateIntro() {
       this.isIntro = true;
       this.isOutro = false;
@@ -41,30 +90,20 @@ export const useAchievementsScreen = defineStore("achievementsScreen", {
         { stage1Opacity: 0 },
         {
           stage1Opacity: 1,
-          duration: 0.3,
+          duration: 0.5,
           ease: "none",
         },
-      )
-        .fromTo(
-          this.intro,
-          { stage2Opacity: 0 },
-          {
-            stage2Opacity: 1,
-            duration: 0.5,
-            ease: "none",
-          },
-          0.5,
-        )
-        .fromTo(
-          this.intro,
-          { progressBar: 0 },
-          {
-            progressBar: 1,
-            duration: 1.5,
-            ease: "power2.out",
-          },
-          0.25,
-        );
+        0.5,
+      ).fromTo(
+        this.intro,
+        { progressBar: 0 },
+        {
+          progressBar: 1,
+          duration: 1.5,
+          ease: "power2.out",
+        },
+        0.25,
+      );
 
       for (let i = 0; i < itemCount; i++) {
         tl.to(
@@ -85,6 +124,14 @@ export const useAchievementsScreen = defineStore("achievementsScreen", {
 
       gsap
         .timeline()
+        .fromTo(
+          this.outro,
+          { stage1Opacity: 1 },
+          {
+            stage1Opacity: 0,
+            duration: 0.3,
+          },
+        )
         .fromTo(
           this.outro,
           { stage2Opacity: 1 },
@@ -92,28 +139,12 @@ export const useAchievementsScreen = defineStore("achievementsScreen", {
             stage2Opacity: 0,
             duration: 0.3,
           },
-        )
-        .fromTo(
-          this.outro,
-          { stage3Opacity: 1 },
-          {
-            stage3Opacity: 0,
-            duration: 0.3,
-          },
           "-=0.15",
         )
-        .fromTo(
-          this.outro,
-          { stage1Opacity: 1 },
-          {
-            stage1Opacity: 0,
-            duration: 0.3,
-            ease: "none",
-          },
-        )
         .call(() => {
           const app = useAppStore();
-          app.navigateTo("home");
+          app.navigateTo(app.previousScreen);
+          this.animateFadeToBlackOutro();
         });
     },