In my upcoming app, I am working on creating a seamless entry/exit animation using Framer Motion's AnimatePresence component. While experimenting with the delay feature, I encountered an issue where only one component would animate properly, while the rest would simply disappear without any animation. You can see the expected behavior versus the current behavior in the following links:
Current & Not Working Behavior
Below is the code snippet for the components:
<AnimatePresence>
{isAboutVisible && (
<motion.div
initial={{ x: 1050, opacity: 0 }}
animate={{ x: 0, opacity: 1 }}
transition={{
duration: 1.5,
...(isSkillsVisible || isProjectsVisible
? { delay: 1.5 }
: {}),
}}
exit={{ x: 1050, opacity: 0 }}
>
<About />
</motion.div>
)}
</AnimatePresence>
<AnimatePresence>
{isSkillsVisible && (
<motion.div
initial={{ x: 1050, opacity: 0 }}
animate={{ x: 0, opacity: 1 }}
transition={{
duration: 1.5,
delay: 1.5,
}}
exit={{ x: 1050, opacity: 0 }}
>
<Skills />
</motion.div>
)}
</AnimatePresence>
<AnimatePresence>
{isProjectsVisible && (
<motion.div
initial={{ x: 1050, opacity: 0 }}
animate={{ x: 0, opacity: 1 }}
transition={{ duration: 1.5, delay: 1.5 }}
exit={{ x: 1050, opacity: 0 }}
>
<Projects />
</motion.div>
)}
</AnimatePresence>