feat(settings): menu animations

app/composables/useMenuAnimation.ts

@@ -0,0 +1,33 @@
+import gsap from "gsap";
+
+export const useMenuAnimation = (isOpen: Ref<boolean>) => {
+  const animation = reactive({
+    playing: false,
+    stage1Offset: 48,
+    stage2Offset: 48,
+  });
+
+  watch(isOpen, (current, previous) => {
+    const duration = 0.1;
+    const timeline = gsap.timeline({
+      onStart: () => {
+        animation.playing = true;
+      },
+      onComplete: () => {
+        animation.playing = false;
+      },
+    });
+
+    if (current === true && previous === false) {
+      timeline
+        .fromTo(animation, { stage1Offset: 48 }, { stage1Offset: 0, duration })
+        .fromTo(animation, { stage2Offset: 48 }, { stage2Offset: 0, duration });
+    } else if (current === false && previous === true) {
+      timeline
+        .fromTo(animation, { stage2Offset: 0 }, { stage2Offset: 48, duration })
+        .fromTo(animation, { stage1Offset: 0 }, { stage1Offset: 48, duration });
+    }
+  });
+
+  return animation;
+};