diff --git a/app/components/Contact/BottomScreen/BottomScreen.vue b/app/components/Contact/BottomScreen/BottomScreen.vue index 63c3386..05e74b9 100644 --- a/app/components/Contact/BottomScreen/BottomScreen.vue +++ b/app/components/Contact/BottomScreen/BottomScreen.vue @@ -51,8 +51,8 @@ const { selected, selectorPosition } = useButtonNavigation({ }, disabled: computed(() => store.isIntro || store.isOutro), selectorAnimation: { - duration: 0.25, - ease: "power2.out", + duration: 0.075, + ease: "none", }, }); diff --git a/app/composables/useButtonNavigation.ts b/app/composables/useButtonNavigation.ts index e9d8969..bfcb7df 100644 --- a/app/composables/useButtonNavigation.ts +++ b/app/composables/useButtonNavigation.ts @@ -37,9 +37,10 @@ export const useButtonNavigation = >({ const selectorPosition = ref(buttons[initialButton]!); const nextButton = ref(); const isAnimating = ref(false); + let currentTimeline: gsap.core.Timeline | null = null; const blockInteractions = computed( - () => confirmationModal.isOpen || disabled?.value || isAnimating.value, + () => confirmationModal.isOpen || disabled?.value, ); const getNavigationTarget = ( @@ -149,14 +150,21 @@ export const useButtonNavigation = >({ const graph = buildNavigationGraph(navigation); const animateToButton = (targetButton: Entry, path?: Array | null) => { + if (currentTimeline) { + currentTimeline.kill(); + currentTimeline = null; + } + const pathButtons = path && path.length > 0 ? path : [targetButton]; isAnimating.value = true; const timeline = gsap.timeline({ onComplete: () => { isAnimating.value = false; + currentTimeline = null; }, }); + currentTimeline = timeline; selectorPosition.value = [...selectorPosition.value]; @@ -312,7 +320,7 @@ export const useButtonNavigation = >({ }); const select = (targetButton: Entry) => { - if (isAnimating.value || disabled?.value) return; + if (disabled?.value) return; const path = findPath(graph, selectedButton.value, targetButton); animateToButton(targetButton, path);