feat(settings): animate transition to submenu (background and sliding)

app/stores/settings.ts

@@ -38,6 +38,17 @@ export const useSettingsStore = defineStore("settings", {
     menuOffsets: [0, -48, -48, -48] as [number, number, number, number],
     menuYOffset: 72,
 
+    submenuTransition: {
+      offsetY: 0,
+      selectorOffsetY: 0,
+      opacity: 1,
+    },
+
+    submenuBackground: {
+      offsetY: 16,
+      opacity: 0,
+    },
+
     animatingNotification: false,
 
     isIntro: true,
@@ -51,7 +62,23 @@ export const useSettingsStore = defineStore("settings", {
       this.currentSubMenu = null;
     },
 
-    openSubMenu(submenu: SettingsSubMenu) {
+    async openSubMenu(submenu: SettingsSubMenu) {
+      await gsap
+        .timeline()
+        .to(this.submenuTransition, {
+          offsetY: -48,
+          selectorOffsetY: -140,
+          opacity: 0,
+          duration: 0.25,
+          ease: "none",
+        })
+        .fromTo(
+          this.submenuBackground,
+          { offsetY: 16, opacity: 0 },
+          { offsetY: 0, opacity: 1, duration: 0.25, ease: "none" },
+          "+=0.05",
+        );
+
       this.currentSubMenu = submenu;
 
       const achievements = useAchievementsStore();
@@ -66,8 +93,32 @@ export const useSettingsStore = defineStore("settings", {
       }
     },
 
-    closeSubMenu() {
+    async closeSubMenu() {
       this.currentSubMenu = null;
+
+      await gsap
+        .timeline()
+        .fromTo(
+          this.submenuBackground,
+          { offsetY: 0, opacity: 1 },
+          { offsetY: 16, opacity: 0, duration: 0.25, ease: "none" },
+        )
+        .fromTo(
+          this.submenuTransition,
+          {
+            offsetY: -48,
+            selectorOffsetY: -140,
+            opacity: 0,
+          },
+          {
+            offsetY: 0,
+            selectorOffsetY: 0,
+            opacity: 1,
+            duration: 0.25,
+            ease: "none",
+          },
+          "+=0.05",
+        );
     },
 
     animateIntro() {