framer motion exist transition is not working

Question

import { motion, AnimatePresence } from 'framer-motion';
<AnimatePresence>
  {isOpen && (
   <motion.div
     key="modal"
     ref={sheetRef}
     initial={{ y: '100%' }}
     animate={{
       y: '0%',
      transition: { duration: 0.2, ease: 'linear' },
     }}
     exit={{
      y: '100%',
      transition: { duration: 0.2, ease: 'linear' },
     }}
  >
  .......
  </motion.div>
))</AnimatePresence>

The exist transition is not working while I close the sheet. Sandbox link

Answer 1

Remove the conditional rendering around your <Sheet /> component. You have conditional rendering logic in two places:

App.tsx

// Not needed
{isOpen && (
    <Sheet isOpen={isOpen} />
)}

Sheet.tsx

<AnimatePresence>
    {isOpen && (
        <motion.div ...>
        ...
        </motion.div>
     )}
</AnimatePresence>

This is reduntant and causing the exit animation to not work because the rendering logic around <Sheet /> is immediately removing <Sheet /> from the React tree. The logic within your <Sheet /> component is the correct logic, according to the framer motion docs.

Here is an updated working example.