feat(buttonNavigation): customize selector animation

app/components/Contact/BottomScreen/BottomScreen.vue

@@ -47,6 +47,10 @@ const { selected, selectorPosition } = useButtonNavigation({
     actionateButton(button);
   },
   disabled: computed(() => store.isIntro || store.isOutro),
+  selectorAnimation: {
+    duration: 0.25,
+    ease: "power2.out",
+  },
 });
 
 const actionateButton = async (button: (typeof selected)["value"]) => {

app/components/Home/BottomScreen/Buttons.vue

@@ -54,6 +54,10 @@ const { selected, selectorPosition } = useButtonNavigation({
     },
   },
   disabled: computed(() => store.isIntro || store.isOutro),
+  selectorAnimation: {
+    duration: 0.3,
+    ease: "power2.out",
+  },
 });
 
 const getButtonOffset = (button: (typeof selected)["value"]) => {

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

@@ -134,6 +134,10 @@ const { select, selected, selectorPosition } = useButtonNavigation({
     },
   },
   disabled: computed(() => settingsStore.currentSubMenu !== null),
+  selectorAnimation: {
+    duration: 0.11,
+    ease: "none",
+  },
 });
 
 const isSubmenuSelected = computed(() => isSubMenu(selected.value));

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

@@ -64,6 +64,10 @@ const { selected, selectorPosition } = useButtonNavigation({
       left: "italian",
     },
   },
+  selectorAnimation: {
+    duration: 0.1,
+    ease: "power2.out",
+  },
 });
 
 const handleCancel = () => {

app/composables/useButtonNavigation.ts

@@ -1,13 +1,12 @@
 import gsap from "gsap";
 
-const DURATION = 0.11;
-
 export const useButtonNavigation = <T extends Record<string, Rect>>({
   buttons,
   initialButton,
   onButtonClick,
   navigation,
   disabled,
+  selectorAnimation,
 }: {
   buttons: T;
   initialButton: keyof T;
@@ -23,6 +22,10 @@ export const useButtonNavigation = <T extends Record<string, Rect>>({
     }
   >;
   disabled?: Ref<boolean>;
+  selectorAnimation: {
+    duration: number;
+    ease: gsap.EaseString;
+  };
 }) => {
   type Entry = keyof T;
 
@@ -165,8 +168,7 @@ export const useButtonNavigation = <T extends Record<string, Rect>>({
           [1]: buttonRect[1],
           [2]: buttonRect[2],
           [3]: buttonRect[3],
-          duration: DURATION,
-          ease: "none",
+          ...selectorAnimation,
         },
         "+=0",
       );