pihkaal/pihkaal-me
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Stevan
2026-01-31 01:01:34 +01:00
parent 7d90166eb7
commit 2814abfc32
2 changed files with 12 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/components/Contact/BottomScreen/BottomScreen.vue
View File

@@ -51,8 +51,8 @@ const { selected, selectorPosition } = useButtonNavigation({
}, },
disabled: computed(() => store.isIntro || store.isOutro), disabled: computed(() => store.isIntro || store.isOutro),
selectorAnimation: { selectorAnimation: {
duration: 0.25, duration: 0.075,
ease: "power2.out", ease: "none",
}, },
}); });

12
app/composables/useButtonNavigation.ts
View File

@@ -37,9 +37,10 @@ export const useButtonNavigation = <T extends Record<string, Rect>>({
const selectorPosition = ref<Rect>(buttons[initialButton]!); const selectorPosition = ref<Rect>(buttons[initialButton]!);
const nextButton = ref<Entry | undefined>(); const nextButton = ref<Entry | undefined>();
const isAnimating = ref(false); const isAnimating = ref(false);
let currentTimeline: gsap.core.Timeline | null = null;
const blockInteractions = computed( const blockInteractions = computed(
() => confirmationModal.isOpen || disabled?.value || isAnimating.value, () => confirmationModal.isOpen || disabled?.value,
); );
const getNavigationTarget = ( const getNavigationTarget = (
@@ -149,14 +150,21 @@ export const useButtonNavigation = <T extends Record<string, Rect>>({
const graph = buildNavigationGraph(navigation); const graph = buildNavigationGraph(navigation);
const animateToButton = (targetButton: Entry, path?: Array<Entry> | null) => { const animateToButton = (targetButton: Entry, path?: Array<Entry> | null) => {
if (currentTimeline) {
currentTimeline.kill();
currentTimeline = null;
}
const pathButtons = path && path.length > 0 ? path : [targetButton]; const pathButtons = path && path.length > 0 ? path : [targetButton];
isAnimating.value = true; isAnimating.value = true;
const timeline = gsap.timeline({ const timeline = gsap.timeline({
onComplete: () => { onComplete: () => {
isAnimating.value = false; isAnimating.value = false;
currentTimeline = null;
}, },
}); });
currentTimeline = timeline;
selectorPosition.value = [...selectorPosition.value]; selectorPosition.value = [...selectorPosition.value];
@@ -312,7 +320,7 @@ export const useButtonNavigation = <T extends Record<string, Rect>>({
}); });
const select = (targetButton: Entry) => { const select = (targetButton: Entry) => {
if (isAnimating.value || disabled?.value) return; if (disabled?.value) return;
const path = findPath(graph, selectedButton.value, targetButton); const path = findPath(graph, selectedButton.value, targetButton);
animateToButton(targetButton, path); animateToButton(targetButton, path);