Animate presence not working in next js for exit animations only?

Question

I'm trying to set an exit animation to my components in next js but I'm only able to give an initial animation.

Can someone tell me what is going wrong here??

Here is my sample code:

 <AnimatePresence >
        <motion.div key="modalBackground" className={styles['auth-modal-layout']} key="modalBackground" initial="hidden" animate="visible" variants={
                {
                    hidden:{
                        opacity:0
                    },
                    visible:{
                        opacity:1,
                        transition:{
                            duration:.4,
                        }
                    },
                }
            } >
            
            <motion.div key="modalForm" className={styles['auth-modal-form']} initial="hidden" exit="pageExit" animate="visible" exit="hidden"  variants={{
                hidden:{
                    translateY:100,
                    opacity:0
                },
                visible:{
                    translateY:0,
                    opacity:1,
                    transition:{
                        duration:.4
                    }
                },
                pageExit:{
                    opacity:0,
                    transition:{
                        when:"afterChildren",
                        duration:.4
                    }
                }
            }} >
                {modal()}
            </motion.div>
               
        </motion.div>
        </AnimatePresence> 

Answer 1

<AnimatePresence> needs to wrap the component that's being conditionally rendered. It can't be inside it.

You need to either move the <AnimatePresence> tag to a higher level or move your conditional logic into the component. Most likely you'd do the former, like so:

<AnimatePresence>
    {modalIsVisible && <ModalComponent />}
</AnimatePresence>

(In this example ModalComponent contains the code you show above).

Otherwise, you'd need to always render the component and pass in a prop to use to conditionally render the children. In your case (a modal window) I don't think that's what you want.