feat(settings): animate buttons

app/stores/settings.ts

@@ -49,6 +49,8 @@ export const useSettingsStore = defineStore("settings", {
       opacity: 0,
     },
 
+    submenuButtonsOffsetY: 0,
+
     animatingNotification: false,
 
     isIntro: true,
@@ -77,10 +79,25 @@ export const useSettingsStore = defineStore("settings", {
           { offsetY: 16, opacity: 0 },
           { offsetY: 0, opacity: 1, duration: 0.25, ease: "none" },
           "+=0.05",
+        )
+        .to(this, {
+          submenuButtonsOffsetY: 24,
+          duration: 0.167,
+          ease: "none",
+        })
+        .call(() => {
+          this.currentSubMenu = submenu;
+        })
+        .to(
+          this,
+          {
+            submenuButtonsOffsetY: 0,
+            duration: 0.167,
+            ease: "none",
+          },
+          "+=0.05",
         );
 
-      this.currentSubMenu = submenu;
-
       const achievements = useAchievementsStore();
       if (!achievements.advancement.visitedSettings.includes(submenu)) {
         achievements.advancement.visitedSettings.push(submenu);
@@ -94,14 +111,33 @@ export const useSettingsStore = defineStore("settings", {
     },
 
     async closeSubMenu() {
-      this.currentSubMenu = null;
+      const confirmationModal = useConfirmationModal();
+      confirmationModal.buttonsYOffset = 0;
 
       await gsap
         .timeline()
+        .to(this, {
+          submenuButtonsOffsetY: 24,
+          duration: 0.167,
+          ease: "none",
+        })
+        .call(() => {
+          this.currentSubMenu = null;
+        })
         .fromTo(
           this.submenuBackground,
           { offsetY: 0, opacity: 1 },
           { offsetY: 16, opacity: 0, duration: 0.25, ease: "none" },
+          0.167,
+        )
+        .to(
+          this,
+          {
+            submenuButtonsOffsetY: 0,
+            duration: 0.167,
+            ease: "none",
+          },
+          0.217,
         )
         .fromTo(
           this.submenuTransition,