diff --git a/app/components/Contact/BottomScreen/BottomScreen.vue b/app/components/Contact/BottomScreen/BottomScreen.vue index 4c398fb..1aec94a 100644 --- a/app/components/Contact/BottomScreen/BottomScreen.vue +++ b/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"]) => { diff --git a/app/components/Home/BottomScreen/Buttons.vue b/app/components/Home/BottomScreen/Buttons.vue index c591419..3ff28fd 100644 --- a/app/components/Home/BottomScreen/Buttons.vue +++ b/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"]) => { diff --git a/app/components/Settings/BottomScreen/Menus/Menus.vue b/app/components/Settings/BottomScreen/Menus/Menus.vue index 83fc544..a9f1f77 100644 --- a/app/components/Settings/BottomScreen/Menus/Menus.vue +++ b/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)); diff --git a/app/components/Settings/BottomScreen/Menus/Options/Language.vue b/app/components/Settings/BottomScreen/Menus/Options/Language.vue index 79f7a5f..b95e893 100644 --- a/app/components/Settings/BottomScreen/Menus/Options/Language.vue +++ b/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 = () => { diff --git a/app/composables/useButtonNavigation.ts b/app/composables/useButtonNavigation.ts index b00d12a..9ac0b39 100644 --- a/app/composables/useButtonNavigation.ts +++ b/app/composables/useButtonNavigation.ts @@ -1,13 +1,12 @@ import gsap from "gsap"; -const DURATION = 0.11; - export const useButtonNavigation = >({ buttons, initialButton, onButtonClick, navigation, disabled, + selectorAnimation, }: { buttons: T; initialButton: keyof T; @@ -23,6 +22,10 @@ export const useButtonNavigation = >({ } >; disabled?: Ref; + selectorAnimation: { + duration: number; + ease: gsap.EaseString; + }; }) => { type Entry = keyof T; @@ -165,8 +168,7 @@ export const useButtonNavigation = >({ [1]: buttonRect[1], [2]: buttonRect[2], [3]: buttonRect[3], - duration: DURATION, - ease: "none", + ...selectorAnimation, }, "+=0", );