Dropdown menu exit animation doesn't work with Framer Motion

[AnishDe12020]

I was implementing a dropdown menu to my application and was using Framer Motion for animations. I am using <AnimatePresence> for existing animations, and as suggested in #1058, I am also using forceMount (there is an open issue and pr to fix this but not yet merged) in DropdownMenu.Content.

Note: Open animation works, only close (ie exit) animation doesn't work

Here is the whole code -

const Component = (): JSX.Element => {
  const [isOpen, setOpen] = useState<boolean>(false);

  return (
    <DropdownMenu.Root open={isOpen} onOpenChange={setOpen}>
      <DropdownMenu.Trigger className="relative z-10 px-4 py-2 text-white rounded-lg bg-gradient-to-bl from-pink-700 to-blue-700 before:absolute before:inset-0 before:bg-gradient-to-tr before:from-pink before:opacity-0 before:-z-10 before:transition before:duration-500 before:hover:opacity-100 before:rounded-lg">
        Export
      </DropdownMenu.Trigger>

      {isOpen && (
        <AnimatePresence>
          <DropdownMenu.Content
            asChild
            forceMount
            sideOffset={16}
            className="flex flex-col p-4 space-y-2 text-white bg-secondary rounded-xl"
          >
            <motion.div
              initial={{
                opacity: 0.6,
                translateY: 8,
                scaleX: 0.8,
                scaleY: 0.6,
              }}
              animate={{ opacity: 1, translateY: 0, scaleX: 1, scaleY: 1 }}
              exit={{ opacity: 0.6, translateY: 8, scaleX: 0.8, scaleY: 0.6 }}
            >
              <DropdownMenu.Item
                onSelect={() => console.log("Export as PNG")}
                className="px-3 py-2 outline-none cursor-pointer rounded-xl focus:bg-accent"
              >
                Export As PNG
              </DropdownMenu.Item>
              <DropdownMenu.Item
                onSelect={() => console.log("Export as JPEG")}
                className="px-3 py-2 outline-none cursor-pointer rounded-xl focus:bg-accent"
              >
                Export As JPEG
              </DropdownMenu.Item>
            </motion.div>
          </DropdownMenu.Content>
        </AnimatePresence>
      )}
    </DropdownMenu.Root>
  );
};

Can someone tell me if and where I am going wrong?

[jjenzz]

Looking at the framer-motion docs it seems you have put the isOpen check too high up. I believe it should be as follows:

const Component = (): JSX.Element => {
  const [isOpen, setOpen] = useState<boolean>(false);

  return (
    <DropdownMenu.Root open={isOpen} onOpenChange={setOpen}>
      <DropdownMenu.Trigger className="relative z-10 px-4 py-2 text-white rounded-lg bg-gradient-to-bl from-pink-700 to-blue-700 before:absolute before:inset-0 before:bg-gradient-to-tr before:from-pink before:opacity-0 before:-z-10 before:transition before:duration-500 before:hover:opacity-100 before:rounded-lg">
        Export
      </DropdownMenu.Trigger>
-     {isOpen && (
      <AnimatePresence>
+       {isOpen && (
          <DropdownMenu.Content
            asChild
            forceMount
            sideOffset={16}
            className="flex flex-col p-4 space-y-2 text-white bg-secondary rounded-xl"
          >
            <motion.div
              initial={{
                opacity: 0.6,
                translateY: 8,
                scaleX: 0.8,
                scaleY: 0.6,
              }}
              animate={{ opacity: 1, translateY: 0, scaleX: 1, scaleY: 1 }}
              exit={{ opacity: 0.6, translateY: 8, scaleX: 0.8, scaleY: 0.6 }}
            >
              <DropdownMenu.Item
                onSelect={() => console.log('Export as PNG')}
                className="px-3 py-2 outline-none cursor-pointer rounded-xl focus:bg-accent"
              >
                Export As PNG
              </DropdownMenu.Item>
              <DropdownMenu.Item
                onSelect={() => console.log('Export as JPEG')}
                className="px-3 py-2 outline-none cursor-pointer rounded-xl focus:bg-accent"
              >
                Export As JPEG
              </DropdownMenu.Item>
            </motion.div>
          </DropdownMenu.Content>
+        )}
      </AnimatePresence>
-     )}
    </DropdownMenu.Root>
  );
};

[AnishDe12020]

Oh thanks, that fixed it