font: tweak duration of some animations

app/composables/useButtonNavigation.ts

@@ -1,6 +1,6 @@
 import gsap from "gsap";
 
-const SELECTOR_SPEED = 500;
+const DURATION = 0.11;
 
 export const useButtonNavigation = <T extends Record<string, Rect>>({
   buttons,
@@ -143,18 +143,6 @@ export const useButtonNavigation = <T extends Record<string, Rect>>({
 
   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<Entry> | null) => {
     const pathButtons = path && path.length > 0 ? path : [targetButton];
 
@@ -164,14 +152,11 @@ export const useButtonNavigation = <T extends Record<string, Rect>>({
         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 = <T extends Record<string, Rect>>({
           [1]: buttonRect[1],
           [2]: buttonRect[2],
           [3]: buttonRect[3],
-          duration,
+          duration: DURATION,
           ease: "none",
         },
         "+=0",
       );
-
-      prevRect = buttonRect;
     }
 
     selectedButton.value = targetButton;

app/composables/useMenuAnimation.ts

@@ -1,5 +1,7 @@
 import gsap from "gsap";
 
+const DURATION = 0.11;
+
 export const useMenuAnimation = (key: string, isOpen: Ref<boolean>) => {
   const animation = useState(`animation-${key}`, () => ({
     playing: false,
@@ -8,7 +10,6 @@ export const useMenuAnimation = (key: string, isOpen: Ref<boolean>) => {
   }));
 
   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<boolean>) => {
         .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 },
         );
     }
   });