quiet bane
Good afternoon folks, I met a problem when I try to use framer-motion on Next with App Route, exit animation would not be played.
(I use only react before, it's work)
I read some article that metioned I need to write template.js to sort all route, but it will affect all page if write motion in template.js. I only want to add exit animation in one page, how can I fix it?
This is a part of my code
<AnimatePresence>
<div className="start_scene">
<motion.div key={pathname} variants={StartPage} initial="initial" animate="animate" exit="exit"
style={{width: '100%', position: "relative"}}>
<ChangeBackground setIndex={setBackgroundIndex}/>
<motion.div variants={StartScene} initial="initial" animate="animate" exit="exit" className="bg"
onClick={nextDialog}
style={{backgroundImage: `url(/images/Startbg${backgroundIndex}.webp)`}}/>
<motion.div variants={StartDialog} initial="initial" animate="animate" exit="exit" onClick={nextDialog}
className="dialog_box">
<Image src="/images/dialog_box.webp" alt="" className="dialog_box_pic" width="1084" height="273"
unoptimized/>
<motion.div initial={{opacity: 0}} animate={{opacity: 1}} exit={{opacity: 0}}
className='dialog'>
</motion.div>
<motion.button variants={DialogSkipButton} initial="initial" animate="animate" exit="exit"
onClick={skipDialog} className="skip_button">
<Image src="/images/skip_icon.webp" alt="" width="346" height="320" unoptimized/>
</motion.button>
</motion.div>
</motion.div>
</div>
</AnimatePresence>
odd bridge
tacit olive
