Animating Dialog component with Framer motion

[arekrgw]

Hi, at first thanks for creating such a great ui lib, great work!

I have hard times using Dialog component. I'd like to animate the modal with framer-motion. I've tried combining lazyMount, unmountOnExit props as well as presence prop but I cannot get it to work. Below I'm sharing my current code. Could you tell me if it is even possible? If so please share an example, I will be thankful!

const Page = () => {
  const [open, setOpen] = useState(false);

  return (
    <div className="mt-[30rem]">
      <Dialog.Root open={open} onOpenChange={(e) => setOpen(e.open)}>
        <Dialog.Trigger>Open Dialog</Dialog.Trigger>
        <Portal>
          <Dialog.Backdrop className="z-modalBackdrop fixed inset-0 bg-black/40" />
          <Dialog.Positioner className="z-modal fixed left-0 top-0 flex h-screen w-screen items-end justify-center">
            <AnimatePresence mode="wait">
              <Dialog.Content asChild className=" max-h-[calc(var(--h-screen)*90)] w-full bg-black text-white">
                <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
                  <Dialog.Title className="px-4 py-8">Title</Dialog.Title>
                  <Dialog.Description>Content</Dialog.Description>
                </motion.div>
              </Dialog.Content>
            </AnimatePresence>
          </Dialog.Positioner>
        </Portal>
      </Dialog.Root>
    </div>
  );
};
export default Page;