I have the following React fly out navigation component using framer motion. This component is used multiple times for each navigation item.
Is there any other way to trigger this animation without conditional rendering (SEO)? Using key won't work, since I need it to be hidden by default and only visible when isActive equals true.
<AnimatePresence initial={false}>
{isActive && (
<FlyOutWrapper exit={{ opacity: 0 }} transition={{ duration: 0.2 }}>
<FlyOutContent
initial={{
x: "5rem",
opacity: 0,
}}
animate={{
x: 0,
opacity: 1,
}}
transition={{ duration: 0.3 }}>
<Content>{title}</Content>
</FlyOutContent>
<FlyOutBackground
initial={{ y: "-100%" }}
animate={{ y: 0 }}
transition={{ duration: 0.3 }}
/>
</FlyOutWrapper>
)}
</AnimatePresence>
If you don't want it to leave the DOM then you don't need to use AnimatePresence at all. Instead, you can animate the position (and opacity, etc) based on your isActive state. You can do this with variants or just by switching between the properties directly.
Example (without variants):
<FlyOutBackground
initial={{ y: "-100%" }}
animate={{ y: isActive ? 0 : "-100%" }}
transition={{ duration: 0.3 }}
/>
Example using variants:
const bgVariants = {
visible: {
y: 0
},
hidden: {
y: "-100%"
}
}
<FlyOutBackground
variants={bgVariants}
initial="hidden"
animate={isActive ? "visible" : "hidden"}
transition={{ duration: 0.3 }}
/>