From d9c9dba166d385c6a75f6d6b8bfbdc949eebc91f Mon Sep 17 00:00:00 2001
From: Pihkaal <hello@pihkaal.me>
Date: Sat, 31 Jan 2026 01:01:34 +0100
Subject: [PATCH] feat(utils): cancel animation on new input in
 useButtonNavigation

---
 app/components/Contact/BottomScreen/BottomScreen.vue |  4 ++--
 app/composables/useButtonNavigation.ts               | 12 ++++++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

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 = <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);