Animating an element that gets removed from the DOM, is not as easy as you might think. Think about it, as soon as the element is removed from the DOM, it’s.. well.. gone. Meaning there is no way to animate it, because it is removed from the actual page before the animation can complete.

A potential CSS “solution”

So a way people tend to work around this, is to not remove the element (immediately) from the page, but rather fade it out and give it a pointer-events: none; style. This way the element is still there, but not clickable or visible — and thus the animation can finish.

Only once it is done, the element is actually removed from the DOM.

The exit prop

However, with Framer Motion we don’t need to resort to solutions like this. The only thing we have to do, is use the exit prop!

The exit prop is similar to initial and animate in the way you use it. You simply pass in a style, and Framer Motion will apply this when the element leaves the DOM.