React Spring animations?

[ghost]

Was wondering if anyone has an example of something like the dialog (modal) or menu (dropdown) working with React Spring? Have tried using the method used by reach-ui but it seems to only animate the entering animation and not the exit animation.

[obouchari]

You forgot to add "static" prop:

[obouchari]

Here is a full example of animating the Menu with react spring:

import { Menu } from "@headlessui/react";
import {
  ArchiveBoxIcon as ArchiveIcon,
  ArrowTopRightOnSquareIcon as MoveIcon,
  ChevronDownIcon,
  DocumentDuplicateIcon as DuplicateIcon,
  PencilSquareIcon as EditIcon,
  TrashIcon as DeleteIcon,
} from "@heroicons/react/20/solid";
import clsx from "clsx";
import { useSpring, animated } from "@react-spring/web";

const AnimatedMenuItems = animated(Menu.Items);

export default function Example() {
  return (
    <div className="w-56 text-right">
      <Menu as="div" className="relative inline-block text-left">
        {({ open }) => (
          <>
            <div>
              <Menu.Button className="inline-flex w-full justify-center rounded-md bg-black bg-opacity-20 px-4 py-2 text-sm font-medium text-white hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
                Options
                <ChevronDownIcon
                  className="ml-2 -mr-1 h-5 w-5 text-violet-200 hover:text-violet-100"
                  aria-hidden="true"
                />
              </Menu.Button>
            </div>

            <MenuItems open={open}>
              <div className="px-1 py-1 ">
                <MenuItem icon={EditIcon}>Edit</MenuItem>
                <MenuItem icon={DuplicateIcon}>Duplicate</MenuItem>
              </div>
              <div className="px-1 py-1">
                <MenuItem icon={ArchiveIcon}>Archive</MenuItem>
                <MenuItem icon={MoveIcon}>Move</MenuItem>
              </div>
              <div className="px-1 py-1">
                <MenuItem icon={DeleteIcon}>Delete</MenuItem>
              </div>
            </MenuItems>
          </>
        )}
      </Menu>
    </div>
  );
}

function MenuItems({ open, children, ...props }) {
  const { x } = useSpring({
    from: { x: 0 },
    x: open ? 1 : 0,
    config: {
      tension: 2000,
      friction: 60,
    },
  });

  return (
    <AnimatedMenuItems
      style={{
        opacity: x.to({ output: [0, 1] }),
        transform: x
          .to({
            range: [0.5, 1],
            output: [0.95, 1],
          })
          .to((x) => `scale(${x})`),
      }}
      className="absolute right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
      static
      {...props}
    >
      {children}
    </AnimatedMenuItems>
  );
}

function MenuItem({ icon: Icon, children }) {
  return (
    <Menu.Item>
      {({ active }) => (
        <button
          className={clsx(
            "group flex w-full items-center rounded-md px-2 py-2 text-sm",
            active ? "bg-violet-500 text-white" : "text-gray-900"
          )}
        >
          <Icon
            className={clsx(
              "mr-2 h-5 w-5 ",
              active ? "text-white" : "text-violet-500"
            )}
            aria-hidden="true"
          />
          {children}
        </button>
      )}
    </Menu.Item>
  );
}