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;

[cschroeter]

@arekrgw

Thanks for bringing this to our attention. If you can setup a Stackblitz I'm happy to support you with this :)

[arekrgw]

@cschroeter here you are https://stackblitz.com/edit/stackblitz-starters-oy45s7?file=app%2Fpage.tsx

My end goal is to create a draggable by <Dialog.Title> drawer and I wanted to use framer-motion for dragging and animating the appear and exit, maybe do you know a better/simpler approach?

[arekrgw]

@cschroeter here is working draggable drawer with framer motion, it is a hybrid and I'm unsure if it's the proper way, but it's working!
https://stackblitz.com/edit/stackblitz-starters-35vxmk?file=app%2Fpage.tsx

Nevertheless I'm curious if there is an easy way to integrate Ark with Framer in case of animating dialogs