Exit animation not working in next js framer motion?

Question

I'm using next js for my application and framer motion for my animation. I'm able to set an intro animation but the none of the exit animations work at all..

I've wrapped the code under the animatedpresence but it doesn't do anything.

What am I missing here?

Here is my sample code below:

<AnimatePresence>
            <motion.form onSubmit={e => { e.preventDefault(); }} className={styles['auth-modal-form']} initial="hidden" exit="formExit" animate="visible" variants={
                {
                    hidden:{
                        opacity:0,
                        translateX:-25
                    },
                    visible:{
                        opacity:1,
                        translateX:0,
                        transition:{
                            duration:.2
                        }
                    },
                    formExit:{
                        translateX:25,
                        transition:{
                            duration:1
                        }
                    }
                }
            } >
                <div className={styles['auth-icon-tray']}>
                    <div className={styles['icon-container']} onClick={()=>{
                        setEmailId('');
                        dispatch(setModalClose())
                        document.body.style.overflow = 'unset';
                        }} >
                            
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M3.33637 14.9467C2.89149 15.3807 2.88064 16.1836 3.34722 16.6394C3.8138 17.0951 4.59506 17.0842 5.03993 16.6502L9.98784 11.6914L14.9466 16.6394C15.3915 17.0951 16.1728 17.0951 16.6393 16.6285C17.0951 16.1728 17.0951 15.3915 16.6502 14.9467L11.6914 9.98789L16.6502 5.03998C17.0951 4.58425 17.1059 3.803 16.6393 3.34727C16.1728 2.89154 15.3915 2.88069 14.9466 3.33643L9.98784 8.28434L5.03993 3.33643C4.59506 2.89154 3.80295 2.88069 3.34722 3.34727C2.88064 3.803 2.89149 4.59509 3.33637 5.02914L8.29515 9.98789L3.33637 14.9467Z" fill="black"/>
                        </svg>
                        
                    </div>
                </div>
                <label className={styles['auth-modal-title']} >Sign in</label>
                <label className={styles['auth-modal-subtitle']} >Get access to all features</label>
                <input 
                    type="text"
                    name="email"
                    autoFocus
                    autoComplete="username email"
                    placeholder="Enter your email"
                    className={errorCondition ? styles['auth-modal-input-error'] :styles['auth-modal-input']}
                    onChange={(e)=>{setErrorCondition(false) ;setEmailHandler(e.target.value)}}
                    defaultValue={emailId}
                    onKeyDown={(e)=>{handleKeypress(e)}}
                />
                <label className={styles['auth-modal-error-message']} >{errorMessage}</label>
                <div className={styles['auth-modal-button-holder']}>
                    {( emailHandler == '')?(<button className={styles['auth-modal-button-faded']}>Continue</button>): emailAuthLoad ? <div className={styles['post-cell-loader']} /> : <button className={styles['auth-modal-button']} onClick={()=>{submitEmail()}}  >Continue</button>}
                    
                </div> 
            </motion.form>
        </AnimatePresence>

Answer 1

Seems that you are unomunting you whole modal component when the user submits the form, killing the AnimatePresence in the process. try something like this:

<AnimatePresence>
  { showModal && 
    <motion.form {...props}>
      //form content
    </motion.form>
</AnimatePresence>

Animate presence should wrap the condition that mounts/unnmounts a component.