Function SubmenuAnimation

packages/dev/docs/pages/blog/SubmenuAnimation.tsx:16–368

()

import {useResizeObserver} from '@react-aria/utils';

export function SubmenuAnimation(): JSX.Element {
  let ref = useRef<HTMLDivElement>(null);
  let [isSubmenuOpen, setIsSubmenuOpen] = useState(false);
  let [hovered, setHovered] = useState('Option 1');
  let isAnimating = useRef(false);
  let mouseRef = useRef<SVGSVGElement>(null);
  let [mouseWidth, setMouseWidth] = useState(12);
  let option1Ref = useRef<SVGTextElement>(null);
  let option2Ref = useRef<SVGTextElement>(null);
  let submenuOptionRef = useRef<SVGTextElement>(null);

  let updateWidth = () => {
    if (ref.current) {
      setMouseWidth(Math.min(12, (window.innerWidth / 768) * 12));
    }
  };

  useResizeObserver({ref: ref, onResize: updateWidth});

  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() {}
        },
        {