feat(settings/user/userName): intro and outro animation

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import gsap from "gsap";
+
 const store = useSettingsStore();
 
 const { onRender } = useScreen();
@@ -8,11 +10,65 @@ const assets = atlas.images.settings.bottomScreen;
 const USER_NAME = "pihkaal";
 const REAL_NAME = "Stevan";
 
-const handleCancel = () => {
+const SLIDE_OFFSET = 48;
+const SLIDE_DURATION = 0.15;
+const OUTRO_OFFSET = 96;
+const OUTRO_DURATION = 0.25;
+const ROW_STAGGER = SLIDE_DURATION + 0.075;
+const ROW_COUNT = 2;
+
+const animation = reactive({
+  rowOffsetY: new Array<number>(ROW_COUNT).fill(SLIDE_OFFSET),
+  rowOpacity: new Array<number>(ROW_COUNT).fill(0),
+});
+
+const animateIntro = async () => {
+  const timeline = gsap.timeline();
+  for (let i = 0; i < ROW_COUNT; i++) {
+    timeline
+      .to(
+        animation.rowOffsetY,
+        { [i]: 0, duration: SLIDE_DURATION, ease: "none" },
+        i * ROW_STAGGER,
+      )
+      .to(
+        animation.rowOpacity,
+        { [i]: 1, duration: SLIDE_DURATION, ease: "none" },
+        i * ROW_STAGGER,
+      );
+  }
+  await timeline;
+};
+
+const animateOutro = async () => {
+  const timeline = gsap.timeline();
+  for (let i = 0; i < ROW_COUNT; i++) {
+    timeline
+      .to(
+        animation.rowOffsetY,
+        { [i]: OUTRO_OFFSET, duration: OUTRO_DURATION, ease: "none" },
+        0,
+      )
+      .to(
+        animation.rowOpacity,
+        { [i]: 0, duration: OUTRO_DURATION, ease: "none" },
+        0,
+      );
+  }
+  await timeline;
+};
+
+onMounted(() => {
+  animateIntro();
+});
+
+const handleCancel = async () => {
+  await animateOutro();
   store.closeSubMenu();
 };
 
-const handleConfirm = () => {
+const handleConfirm = async () => {
+  await animateOutro();
   store.closeSubMenu();
 };
 
@@ -46,8 +102,17 @@ onRender((ctx) => {
     }
   };
 
+  ctx.save();
+  ctx.globalAlpha = animation.rowOpacity[0]!;
+  ctx.translate(0, animation.rowOffsetY[0]!);
   drawTextField($t("settings.user.userName.userName"), USER_NAME, 31, 48);
+  ctx.restore();
+
+  ctx.save();
+  ctx.globalAlpha = animation.rowOpacity[1]!;
+  ctx.translate(0, animation.rowOffsetY[1]!);
   drawTextField($t("settings.user.userName.firstName"), REAL_NAME, 31, 96);
+  ctx.restore();
 });
 
 defineOptions({ render: () => null });