diff --git a/app/composables/useButtonNavigation.ts b/app/composables/useButtonNavigation.ts index b7995b1..b00d12a 100644 --- a/app/composables/useButtonNavigation.ts +++ b/app/composables/useButtonNavigation.ts @@ -1,6 +1,6 @@ import gsap from "gsap"; -const SELECTOR_SPEED = 500; +const DURATION = 0.11; export const useButtonNavigation = >({ buttons, @@ -143,18 +143,6 @@ export const useButtonNavigation = >({ const graph = buildNavigationGraph(navigation); - const calculateDistance = ( - [x1, y1, w1, h1]: Rect, - [x2, y2, w2, h2]: Rect, - ): number => { - const cx1 = x1 + w1 / 2; - const cy1 = y1 + h1 / 2; - const cx2 = x2 + w2 / 2; - const cy2 = y2 + h2 / 2; - - return Math.sqrt((cx2 - cx1) ** 2 + (cy2 - cy1) ** 2); - }; - const animateToButton = (targetButton: Entry, path?: Array | null) => { const pathButtons = path && path.length > 0 ? path : [targetButton]; @@ -164,14 +152,11 @@ export const useButtonNavigation = >({ isAnimating.value = false; }, }); - let prevRect = selectorPosition.value; selectorPosition.value = [...selectorPosition.value]; for (const button of pathButtons) { const buttonRect = buttons[button]!; - const distance = calculateDistance(prevRect, buttonRect); - const duration = distance / SELECTOR_SPEED; timeline.to( selectorPosition.value, @@ -180,13 +165,11 @@ export const useButtonNavigation = >({ [1]: buttonRect[1], [2]: buttonRect[2], [3]: buttonRect[3], - duration, + duration: DURATION, ease: "none", }, "+=0", ); - - prevRect = buttonRect; } selectedButton.value = targetButton; diff --git a/app/composables/useMenuAnimation.ts b/app/composables/useMenuAnimation.ts index f521a9b..b6f0f28 100644 --- a/app/composables/useMenuAnimation.ts +++ b/app/composables/useMenuAnimation.ts @@ -1,5 +1,7 @@ import gsap from "gsap"; +const DURATION = 0.11; + export const useMenuAnimation = (key: string, isOpen: Ref) => { const animation = useState(`animation-${key}`, () => ({ playing: false, @@ -8,7 +10,6 @@ export const useMenuAnimation = (key: string, isOpen: Ref) => { })); watch(isOpen, (current, previous) => { - const duration = 0.1; const timeline = gsap.timeline({ onStart: () => { animation.value.playing = true; @@ -23,24 +24,24 @@ export const useMenuAnimation = (key: string, isOpen: Ref) => { .fromTo( animation.value, { stage1Offset: 48 }, - { stage1Offset: 0, duration }, + { stage1Offset: 0, ease: "none", duration: DURATION }, ) .fromTo( animation.value, { stage2Offset: 48 }, - { stage2Offset: 0, duration }, + { stage2Offset: 0, ease: "none", duration: DURATION }, ); } else if (current === false && previous === true) { timeline .fromTo( animation.value, { stage2Offset: 0 }, - { stage2Offset: 48, duration }, + { stage2Offset: 48, ease: "none", duration: DURATION }, ) .fromTo( animation.value, { stage1Offset: 0 }, - { stage1Offset: 48, duration }, + { stage1Offset: 48, ease: "none", duration: DURATION }, ); } });