CODEWITHSUNDEEP
reactjsanimationframer-motion
Maurits Brouwer
Maurits Brouwer

Reputation: 13

Framer motion exit animation also plays on mapped react div elements

I am new to Framer Motion, and I can't figure out this problem. I am using React and I have an array of objects that I .map() through. For each object, it will make a div.

Here is my problem: I made this div a motion.div and I added an exit animation to it. But when I click on ONE element, all of the other elements also play the exit animation. How can I prevent this from happening? I only want the div that got clicked playing the exit animation, not the other divs.

BTW: the hover animations do work individually. e.g. whileHover={{scale: 1.03}}

Small example of code:

{marvelMovies.map((movie, index) => 
   <motion.div exit={{opacity: 0}} transition={transition} className="movie" key={index}>
  
   
   </motion.div>
)}

Upvotes: 0

Views: 3025

Answers (1)

Joshua Wootonn
Joshua Wootonn

Reputation: 1276

Are you wrapping the divs in Animate Presence

<AnimatePresence>
{marvelMovies.map((movie, index) => 
   <motion.div exit={{opacity: 0}} transition={transition} className="movie" key={index} />)}
</AnimatePresence>

I made a code sandbox with a working example: https://codesandbox.io/s/framer-motion-multiple-item-animation-presence-sdmq2

Upvotes: 1

Related Questions