feat(utils): cancel animation on new input in useButtonNavigation

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",
   },
 });
 

app/composables/useButtonNavigation.ts

@@ -37,9 +37,10 @@ export const useButtonNavigation = <T extends Record<string, Rect>>({
   const selectorPosition = ref<Rect>(buttons[initialButton]!);
   const nextButton = ref<Entry | undefined>();
   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 = <T extends Record<string, Rect>>({
   const graph = buildNavigationGraph(navigation);
 
   const animateToButton = (targetButton: Entry, path?: Array<Entry> | 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 = <T extends Record<string, Rect>>({
   });
 
   const select = (targetButton: Entry) => {
-    if (isAnimating.value || disabled?.value) return;
+    if (disabled?.value) return;
 
     const path = findPath(graph, selectedButton.value, targetButton);
     animateToButton(targetButton, path);