Exit Animations

When animating the exit of a component, it often feels better to make the animation slightly subtler than the enter animation.

When a component exits, it usually doesn’t need the same amount of movement or attention as when it’s entering.

In the full value example the exit y value is calc(-100% - 4px), this is the same position where the container animates in from.

This means that the container animates in from -100% of its height, with an extra 4px to account for the padding.

<motion.div
  key="menu"
  className="container"
  initial={{ opacity: 0, translateY: "calc(-100% - 4px)", filter: "blur(4px)" }}
  animate={{ opacity: 1, translateY: 0, filter: "blur(0px)" }}
  exit={{
    opacity: 0,
    translateY: "calc(-100% - 4px)",
    filter: "blur(4px)",
  }}
  transition={{ type: "spring", duration: 0.45, bounce: 0 }}
/>

In the small value example, instead of using a calculated value, we just use a fixed value of -12px. We definitely still want some motion to indicate the direction, so I wouldn't recommend removing the animation completely.

<motion.div
  key="menu"
  className="container"
  initial={{ opacity: 0, translateY: "calc(-100% - 4px)", filter: "blur(4px)" }}
  animate={{ opacity: 1, translateY: 0, filter: "blur(0px)" }}
  exit={{
    opacity: 0,
    translateY: "-12px",
    filter: "blur(4px)",
  }}
  transition={{ type: "spring", duration: 0.45, bounce: 0 }}
/>

By doing this, the exit animation becomes much softer, less jarring and doesn't demand same amount of attention as the enter animation.

This of course depends on the specific animation, sometimes it makes sense to animate the full value. I found this trick pretty helpful and I use it in my work a lot.

More

In case you have any questions reach me at jakub@kbo.sk, see more of my work on Twitter or subscribe to my newsletter.