Function startAnimation

packages/dev/docs/pages/blog/SubmenuAnimation.tsx:36–117

()

  useEffect(() => {
    let startAnimation = () => {
      let cancel = animate([
        {
          time: 500,
          perform() {
            setTimeout(() => {
              setHovered('Option 1');
            }, 500);
          }
        },
        {
          time: 700,
          perform() {
            let option1Rect = option1Ref.current!.getBoundingClientRect();
            let option2Rect = option2Ref.current!.getBoundingClientRect();
            let x =
              option1Rect.left + option1Rect.width / 2 - ref.current!.getBoundingClientRect().left;
            let y =
              option1Rect.top + option1Rect.height / 2 - ref.current!.getBoundingClientRect().top;
            let y_target =
              option2Rect.top + option2Rect.height / 2 - ref.current!.getBoundingClientRect().top;
            mouseRef.current!.animate(
              {
                transform: [`translate(${x}px, ${y}px)`, `translate(${x}px, ${y_target}px)`]
              },
              {duration: 1000, fill: 'forwards', easing: 'ease-in-out'}
            );
            setTimeout(() => {
              setHovered('Option 2');
              setIsSubmenuOpen(true);
            }, 350);
          }
        },
        {
          time: 700,
          perform() {}
        },
        {
          time: 700,
          perform() {
            let option1Rect = option1Ref.current!.getBoundingClientRect();
            let option2Rect = option2Ref.current!.getBoundingClientRect();
            let submenuOptionRect = submenuOptionRef.current!.getBoundingClientRect();
            let x =
              option1Rect.left + option1Rect.width / 2 - ref.current!.getBoundingClientRect().left;
            let y =
              option2Rect.top + option2Rect.height / 2 - ref.current!.getBoundingClientRect().top;
            let x_target =
              submenuOptionRect.left +
              submenuOptionRect.width / 2 -
              ref.current!.getBoundingClientRect().left;
            let y_target =
              submenuOptionRect.top +
              submenuOptionRect.height / 2 -
              ref.current!.getBoundingClientRect().top;
            mouseRef.current!.animate(
              {
                transform: [`translate(${x}px, ${y}px)`, `translate(${x_target}px, ${y_target}px)`]