framer motion exit animations not working.

[heyitsarpit]

What's incorrect with my code here? I pass forceMount and asChild as mentioned in the docs.

export function HamburgerSideBar() {
  const [open, setOpen] = useState(false)

  return (
    <Dialog.Root onOpenChange={(o) => setOpen(o)}>
      <Dialog.Trigger className='relative z-50'>
        <HamburgerButton open={open} />
      </Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay className='fixed inset-0 pointer-events-none bg-black/70 backdrop-blur-sm' />
        <AnimatePresence>
          {open ? (
            <Dialog.Content asChild forceMount>
              <motion.div
                initial={{ x: '-100%' }}
                animate={{ x: 0 }}
                exit={{ x: '-100%' }}
                transition={{ duration: 0.4, ease: 'linear' }}
                className='fixed top-0 left-0 z-50 h-full bg-grey-11 w-96'>
                <SidebarContent />
              </motion.div>
            </Dialog.Content>
          ) : null}
        </AnimatePresence>
      </Dialog.Portal>
    </Dialog.Root>
  )
}

[heyitsarpit]

I found the solution -
You need to put forceMount prop on the Portal and wrap it in AnimatePresence. Content and overlay will also require forceMount.

export function HamburgerSideBar() {
  const [open, setOpen] = useState(false)

  return (
    <Dialog.Root onOpenChange={(o) => setOpen(o)}>
      <Dialog.Trigger className='relative z-[51]'>
        <HamburgerButton open={open} />
      </Dialog.Trigger>
      <AnimatePresence>
        {open ? (
          <Dialog.Portal forceMount>
            <Dialog.Overlay asChild forceMount>
              <motion.div
                className='fixed inset-0 z-50 cursor-pointer bg-black/50 backdrop-blur-[10px]'
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                transition={{ duration: 0.4, ease: 'easeInOut' }}></motion.div>
            </Dialog.Overlay>
            <Dialog.Content asChild forceMount>
              <motion.div
                initial={{ x: '-100%' }}
                animate={{ x: 0 }}
                exit={{ x: '-100%' }}
                transition={{ duration: 0.4, ease: 'easeInOut' }}
                className='fixed top-0 left-0 z-50 h-full w-72 bg-grey-11 md:w-[70vw]'>
                <SidebarContent />
              </motion.div>
            </Dialog.Content>
          </Dialog.Portal>
        ) : null}
      </AnimatePresence>
    </Dialog.Root>
  )
}

[jjenzz]

Thanks for raising this. It actually looks like you have found a bug as you shouldn’t need to add the forceMount to all of the parts like that. It should only be needed on the portal in your example.

Would you mind raising a bug that references this discussion for us to look into please?

[heyitsarpit]

Issue Opened - #1061