feat(settings): intro and outro animation

app/components/Home/TopScreen/Calendar.vue

@@ -24,7 +24,7 @@ onRender((ctx) => {
   const daysInMonth = new Date(year, month + 1, 0).getDate();
 
   ctx.globalAlpha = store.isIntro
-    ? store.intro.stage1Opacity
+    ? store.intro.topScreenOpacity
     : store.isOutro && store.outro.animateTop
       ? store.outro.stage1Opacity
       : 1;
@@ -44,7 +44,7 @@ onRender((ctx) => {
   }
 
   ctx.globalAlpha = store.isIntro
-    ? store.intro.stage1Opacity
+    ? store.intro.topScreenOpacity
     : store.isOutro && store.outro.animateTop
       ? store.outro.stage2Opacity
       : 1;

app/components/Home/TopScreen/Clock.vue

@@ -55,14 +55,14 @@ function drawLine(
 
 onRender((ctx) => {
   ctx.globalAlpha = store.isIntro
-    ? store.intro.stage1Opacity
+    ? store.intro.topScreenOpacity
     : store.isOutro && store.outro.animateTop
       ? store.outro.stage1Opacity
       : 1;
   assets.images.home.topScreen.clock.draw(ctx, 13, 45);
 
   ctx.globalAlpha = store.isIntro
-    ? store.intro.stage1Opacity
+    ? store.intro.topScreenOpacity
     : store.isOutro && store.outro.animateTop
       ? store.outro.stage2Opacity
       : 1;

app/components/Settings/BottomScreen/BottomScreen.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import Background from "./Background.vue";
 import Menus from "./Menus/Menus.vue";
+
+const store = useSettingsStore();
 </script>
 
 <template>
   <Background />
-  <CommonBars />
+  <CommonBars :y-offset="store.barOffsetY" />
   <Menus />
   <CommonConfirmationModal />
   <AchievementsFadeToBlack />

app/components/Settings/BottomScreen/Menus/Menus.vue

@@ -21,6 +21,10 @@ import Selector from "~/components/Common/ButtonSelector.vue";
 const app = useAppStore();
 const settingsStore = useSettingsStore();
 
+if (app.previousScreen === "home") {
+  settingsStore.selectedButton = "options";
+}
+
 const isMainMenu = (button: string): button is SettingsMenu =>
   SETTINGS_MENUS.includes(button as SettingsMenu);
 
@@ -195,30 +199,78 @@ const viewComponents: Record<string, Component> = {
 
   touchScreenTapTap: TouchScreenTapTap,
 };
+
+const selectorXOffset = computed(() => {
+  const menu = isMainMenu(selected.value)
+    ? selected.value
+    : getParentMenu(selected.value);
+
+  switch (menu) {
+    case "clock":
+      return Math.min(0, settingsStore.menuOffsets[1]);
+    case "user":
+      return Math.min(
+        0,
+        settingsStore.menuOffsets[1] + settingsStore.menuOffsets[2],
+      );
+    case "touchScreen":
+      return Math.min(
+        0,
+        settingsStore.menuOffsets[1] +
+          settingsStore.menuOffsets[2] +
+          settingsStore.menuOffsets[3],
+      );
+    default:
+      return 0;
+  }
+});
 </script>
 
 <template>
   <template v-if="!settingsStore.currentSubMenu">
-    <OptionsMenu :x="33" :y="121" />
-    <ClockMenu :x="81" :y="121" />
-    <UserMenu :x="129" :y="121" />
-    <TouchScreenMenu :x="177" :y="121" :opacity="1" />
+    <TouchScreenMenu
+      :x="
+        177 +
+        settingsStore.menuOffsets[1] +
+        settingsStore.menuOffsets[2] +
+        settingsStore.menuOffsets[3]
+      "
+      :y="121 + settingsStore.menuYOffset"
+      :opacity="1"
+    />
+    <UserMenu
+      :x="129 + settingsStore.menuOffsets[1] + settingsStore.menuOffsets[2]"
+      :y="121 + settingsStore.menuYOffset"
+    />
+    <ClockMenu
+      :x="81 + settingsStore.menuOffsets[1]"
+      :y="121 + settingsStore.menuYOffset"
+    />
+    <OptionsMenu :x="33" :y="121 + settingsStore.menuYOffset" />
 
-    <Selector :rect="selectorPosition" :opacity="1" />
+    <Selector
+      :rect="[
+        selectorPosition[0] + selectorXOffset,
+        selectorPosition[1] + settingsStore.menuYOffset,
+        selectorPosition[2],
+        selectorPosition[3],
+      ]"
+      :opacity="1"
+    />
 
     <CommonButtons
       v-if="isSubmenuSelected"
-      :y-offset="0"
+      :y-offset="settingsStore.barOffsetY"
       :b-label="$t('common.goBack')"
       :a-label="$t('common.select')"
       @activate-b="select(getParentMenu(selected))"
     />
     <CommonButtons
       v-else
-      :y-offset="0"
+      :y-offset="settingsStore.barOffsetY"
       :b-label="$t('common.quit')"
       :a-label="$t('common.select')"
-      @activate-b="app.navigateTo('home')"
+      @activate-b="settingsStore.animateOutro()"
     />
   </template>
   <component :is="viewComponents[settingsStore.currentSubMenu]" v-else />

app/components/Settings/TopScreen/Calendar.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 const { onRender } = useScreen();
 
+const store = useSettingsStore();
 const { assets } = useAssets();
 
 onRender((ctx) => {
   ctx.fillStyle = "black";
   ctx.font = "7px NDS7";
 
-  ctx.translate(0, -16);
+  ctx.translate(0, -16 + store.notificationYOffset / 3);
 
   const CALENDAR_COLS = 7;
   const CALENDAR_ROWS = 5;

app/components/Settings/TopScreen/Clock.vue

@@ -2,6 +2,7 @@
 const { onRender } = useScreen();
 
 const app = useAppStore();
+const store = useSettingsStore();
 const { assets } = useAssets();
 
 const CENTER_X = 63;
@@ -53,7 +54,7 @@ function drawLine(
 }
 
 onRender((ctx) => {
-  ctx.translate(0, -16);
+  ctx.translate(0, -16 + store.notificationYOffset / 3);
 
   assets.images.home.topScreen.clock.draw(ctx, 13, 45);
 

app/components/Settings/TopScreen/Notifications.vue

@@ -1,9 +1,21 @@
 <script setup lang="ts">
-const { onRender } = useScreen();
+import gsap from "gsap";
 
+const { onRender } = useScreen();
 const store = useSettingsStore();
 const { assets } = useAssets();
 
+type NotificationData = {
+  image: AtlasImage;
+  title: string;
+  description: string;
+};
+
+const menuYOffset = ref(0);
+const submenuYOffset = ref(0);
+const visibleMenuNotification = ref<NotificationData | null>(null);
+const visibleSubmenuNotification = ref<NotificationData | null>(null);
+
 const renderNotification = (
   ctx: CanvasRenderingContext2D,
   image: AtlasImage,
@@ -83,13 +95,62 @@ const submenuNotification = computed(() => {
   };
 });
 
+const animateNotification = (
+  curr: NotificationData | null,
+  prev: NotificationData | null,
+  visibleRef: Ref<NotificationData | null>,
+  offsetRef: Ref<number>,
+) => {
+  if (prev !== null && curr === null) {
+    // slide down
+    visibleRef.value = prev;
+    gsap.fromTo(
+      offsetRef,
+      { value: 0 },
+      {
+        value: 48,
+        duration: 0.2,
+        ease: "none",
+        onComplete: () => {
+          visibleRef.value = null;
+        },
+      },
+    );
+  } else if (prev === null && curr !== null) {
+    // slide up
+    visibleRef.value = curr;
+    gsap.fromTo(
+      offsetRef,
+      { value: 48 },
+      { value: 0, duration: 0.2, ease: "none" },
+    );
+  }
+};
+
+watch(menuNotification, (curr, prev) => {
+  animateNotification(curr, prev, visibleMenuNotification, menuYOffset);
+});
+
+watch(submenuNotification, (curr, prev) => {
+  animateNotification(curr, prev, visibleSubmenuNotification, submenuYOffset);
+});
+
 onRender((ctx) => {
-  let count = 1;
-  if (menuNotification.value) count++;
-  if (submenuNotification.value) count++;
-
-  ctx.translate(0, 144 - (count - 1) * 16);
+  const submenuY = 144 + submenuYOffset.value;
+  const menuY = visibleSubmenuNotification.value
+    ? Math.min(144, submenuY - 16) + menuYOffset.value
+    : 144 + menuYOffset.value;
+  const nextY = visibleMenuNotification.value
+    ? menuY
+    : visibleSubmenuNotification.value
+      ? submenuY
+      : null;
+  const mainY =
+    nextY !== null
+      ? Math.min(144, nextY - 16) + store.notificationYOffset
+      : 144 + store.notificationYOffset;
 
+  ctx.translate(0, mainY);
   renderNotification(
     ctx,
     mainNotification.value.image,
@@ -97,23 +158,24 @@ onRender((ctx) => {
     mainNotification.value.description,
   );
 
-  if (menuNotification.value) {
-    ctx.translate(0, 16);
+  if (visibleMenuNotification.value) {
+    ctx.translate(0, menuY - mainY);
     renderNotification(
       ctx,
-      menuNotification.value.image,
-      menuNotification.value.title,
-      menuNotification.value.description,
+      visibleMenuNotification.value.image,
+      visibleMenuNotification.value.title,
+      visibleMenuNotification.value.description,
     );
   }
 
-  if (submenuNotification.value) {
-    ctx.translate(0, 16);
+  if (visibleSubmenuNotification.value) {
+    const prevY = visibleMenuNotification.value ? menuY : mainY;
+    ctx.translate(0, submenuY - prevY);
     renderNotification(
       ctx,
-      submenuNotification.value.image,
-      submenuNotification.value.title,
-      submenuNotification.value.description,
+      visibleSubmenuNotification.value.image,
+      visibleSubmenuNotification.value.title,
+      visibleSubmenuNotification.value.description,
     );
   }
 });

app/components/Settings/TopScreen/TopScreen.vue

@@ -4,6 +4,12 @@ import Calendar from "./Calendar.vue";
 import Clock from "./Clock.vue";
 import StatusBar from "./StatusBar.vue";
 import Notifications from "./Notifications.vue";
+
+const store = useSettingsStore();
+
+onMounted(() => {
+  store.animateIntro();
+});
 </script>
 
 <template>

app/stores/home.ts

@@ -13,6 +13,7 @@ export const useHomeStore = defineStore("home", {
     intro: {
       statusBarY: -20,
       stage1Opacity: 0,
+      topScreenOpacity: 0,
     },
 
     outro: {
@@ -44,14 +45,15 @@ export const useHomeStore = defineStore("home", {
     animateIntro() {
       this.isIntro = true;
 
+      const app = useAppStore();
+
       const timeline = gsap.timeline({
         onComplete: () => {
           this.isIntro = false;
         },
       });
 
-      timeline
-        .fromTo(
+      timeline.fromTo(
         this.intro,
         { stage1Opacity: 0 },
         {
@@ -60,6 +62,19 @@ export const useHomeStore = defineStore("home", {
           ease: "none",
         },
         0,
+      );
+
+      if (app.previousScreen !== "settings") {
+        timeline
+          .fromTo(
+            this.intro,
+            { topScreenOpacity: 0 },
+            {
+              topScreenOpacity: 1,
+              duration: 0.5,
+              ease: "none",
+            },
+            0,
           )
           .fromTo(
             this.intro,
@@ -71,6 +86,10 @@ export const useHomeStore = defineStore("home", {
             },
             0.35,
           );
+      } else {
+        this.intro.topScreenOpacity = 1;
+        this.intro.statusBarY = 0;
+      }
     },
 
     animateOutro(to: AppScreen) {

app/stores/settings.ts

@@ -1,3 +1,5 @@
+import gsap from "gsap";
+
 export const SETTINGS_MENUS = [
   "options",
   "clock",
@@ -31,6 +33,13 @@ export const useSettingsStore = defineStore("settings", {
     currentSubMenu: null as SettingsSubMenu | null,
     menuExpanded: false,
     selectedButton: "options" as SettingsNavigableButton,
+    notificationYOffset: 48,
+    barOffsetY: 24,
+    menuOffsets: [0, -48, -48, -48] as [number, number, number, number],
+    menuYOffset: 72,
+
+    isIntro: true,
+    isOutro: false,
   }),
 
   actions: {
@@ -58,5 +67,107 @@ export const useSettingsStore = defineStore("settings", {
     closeSubMenu() {
       this.currentSubMenu = null;
     },
+
+    animateIntro() {
+      this.isIntro = true;
+
+      gsap
+        .timeline()
+        // bars
+        .fromTo(
+          this,
+          { barOffsetY: 24 },
+          { barOffsetY: 0, duration: 0.2, ease: "none" },
+          0,
+        )
+        // title notification
+        .fromTo(
+          this,
+          { notificationYOffset: 48 },
+          { notificationYOffset: 0, duration: 0.2, ease: "none" },
+          0.1,
+        )
+        // menus slide up
+        .fromTo(
+          this,
+          { menuYOffset: 72 },
+          { menuYOffset: 0, duration: 0.2, ease: "none" },
+          0,
+        )
+        // menus accordion
+        .fromTo(
+          this.menuOffsets,
+          { 1: -48 },
+          { 1: 0, duration: 0.1, ease: "none" },
+          0.2,
+        )
+        .fromTo(
+          this.menuOffsets,
+          { 2: -48 },
+          { 2: 0, duration: 0.1, ease: "none" },
+          0.3,
+        )
+        .fromTo(
+          this.menuOffsets,
+          { 3: -48 },
+          { 3: 0, duration: 0.1, ease: "none" },
+          0.4,
+        )
+        .call(() => {
+          this.isIntro = false;
+        });
+    },
+
+    animateOutro() {
+      this.isOutro = true;
+
+      gsap
+        .timeline()
+        // title notification
+        .fromTo(
+          this,
+          { notificationYOffset: 0 },
+          { notificationYOffset: 48, duration: 0.2, ease: "none" },
+          0,
+        )
+        // bars
+        .fromTo(
+          this,
+          { barOffsetY: 0 },
+          { barOffsetY: 24, duration: 0.2, ease: "none" },
+          0.1,
+        )
+        // menus accordion
+        .fromTo(
+          this.menuOffsets,
+          { 3: 0 },
+          { 3: -48, duration: 0.1, ease: "none" },
+          0,
+        )
+        .fromTo(
+          this.menuOffsets,
+          { 2: 0 },
+          { 2: -48, duration: 0.1, ease: "none" },
+          0.1,
+        )
+        .fromTo(
+          this.menuOffsets,
+          { 1: 0 },
+          { 1: -48, duration: 0.1, ease: "none" },
+          0.2,
+        )
+        // menus slide down
+        .fromTo(
+          this,
+          { menuYOffset: 0 },
+          { menuYOffset: 72, duration: 0.2, ease: "none" },
+          0.3,
+        )
+        .call(() => {
+          const app = useAppStore();
+          app.navigateTo("home");
+          this.isOutro = false;
+        });
+    },
   },
 });