In Framer Motion how to remove bounce on AnimatePresence?

Question

Playing with Framer Motion after building my motion I've noticed that when cycling through AnimatePresence there is a bounce off the div.

variants:

const variants = {
  enter: ({ direction, width }) => ({ x: direction * width }),
  center: { x: 0 },
  exit: ({ direction, width }) => ({ x: direction * -width })
};

AnimatePresence:

<Flex flex="1" align="center" justify="center">
  <AnimatePresence
    mode="wait"
    initial={false}
    custom={{ direction, width }}
  >
    <motion.div
      key={index}
      variants={variants}
      initial="enter"
      animate="center"
      exit="exit"
      custom={{ direction, width }}
      w="full"
    >
      // removed code
    </motion.div>
  </AnimatePresence>
</Flex>

Referencing the docs and under Exit animations has the same behavior and was used as a reference when building mine. Didin't see anything under props to show how to stop the bounce.

CodeSandbox

Looked under a few existing questions:

• odd behavior with framer motion animate on presence
• Framer-Motion AnimatePresence Choppy Animation
• framer-motion AnimatePresence layout issue
• Framer Motion AnimatePresence Nested Import Problem
• Can't get AnimatePresence in Framer Motion to work
• React js framer motion AnimatePresence not work on Exit

In Framer Motion is there a way to remove the bounce?

Answer 1

You can customize the transition with the transition prop on motion elements. The transition prop allows you to do all sorts of animations, including removing the bounce from the spring animation. In your code, you are using value-specific transitions, which allows you to set transition for a specific value. The x transition is set to "spring". To remove the bounce from your animation, update your transition like so:

transition={{
    x: { type: "spring", bounce: 0 },
    opacity: { duration: 0.2 }
}}

I often use this framer motion visualizer to get the spring animation I want. You can also use an easing function for the transition.