Framer Motion , can we stagger items only on enter, but simultaneously exit them?

Question

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>

Answer 1

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.

Answer 2

exitBeforeEnter has been deprecated for mode="wait" in v7.2

<AnimatePresence mode="wait">
  {items.map((item, i) => (
     <motion.div
       key={item.id}
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       exit={{ opacity: 0, transition: { duration: 0.5 } }}
       transition={{ duration: 1, delay: i * 1 }}>
       {item}
     </motion.div>
   ))}
</AnimatePresence>