We're staggering animations using Framer Motion with some code like below. The problem is, we only want to stagger items in, not out. Is there any way to specify staggering behavior specific to initial
and exit
, as opposed to the top level transition
property we're using to define staggering now?
I think we could achieve this specifying "variants" but is it possible without adding that extra code and complexity?
<AnimatePresence exitBeforeEnter>
{items.map((item, i) => (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 1, delay: i * 1 }}>
{item}
</motion.div>
))}
</AnimatePresence>
CodePudding user response:
You can specify a different transition for the exit
prop:
<AnimatePresence exitBeforeEnter>
{items.map((item, i) => (
<motion.div
key={item.id} // don't forget the key!!!
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0, transition: { duration: 0.5 } }}
transition={{ duration: 1, delay: i * 1 }}>
{item}
</motion.div>
))}
</AnimatePresence>
Your other animations will continue to use the default transition from the transition
prop.
Also, don't forget to add a unique key
to each element, or your exit animations won't work.