CODEWITHSUNDEEP
reactjsanimationframer-motion
shennan
shennan

Reputation: 11676

Different transition for exit animation in Framer Motion

How can I achieve a different type of transition for an exit property in Framer Motion?

<motion.div
  initial={{opacity: 0, transform: 'scale(0.5)'}}
  animate={{opacity: 1, transform: 'scale(1)'}}
  exit={{opacity: 0, transform: 'scale(0.5)'}}
  /* I want "type" to be different only for the exit animation */
  transition={{ type: "spring", stiffness: 200 }}
></motion.div>

I want the "spring" transition to be used for initial and animate, but for exit I want a different type. Exit animation is working (I am using <AnimatePresence> wrapper, but I just want a different behaviour for exit.

Upvotes: 8

Views: 5773

Answers (1)

Badal Saibo
Badal Saibo

Reputation: 3685

You can add the transition property to both the Frame and the variant directly. Adding it to the variant generally offers more flexibility, as it allows you to customize the delay per visual state. [1]

<motion.div
  initial={{opacity: 0, transform: 'scale(0.5)'}}
  animate={{opacity: 1, transform: 'scale(1)'}}
  exit={{
    opacity: 0, 
    transform: 'scale(0.5)', 
    transition: { ease: 'easeIn', duration: 10 } 
  }} // transition property only for exit stage
  transition={{ type: "spring", stiffness: 200 }}
></motion.div>

Reference:

  1. https://www.framer.com/docs/transition/###delaychildren

Upvotes: 6

Related Questions