The Magic Disappearing Menu: Why CSS Exit Animations Matter

Handling the exit CSS animation gracefully

Photo by Keagan Henman on Unsplash

Have you ever clicked a button to open a menu on a website, only to have it vanish instantly when you click again to close it? It might seem like a small detail, but those disappearing acts can actually hurt the user experience.

Think about it this way: in the real world, when you open a door, you expect it to close smoothly too. The same goes for UIs. When a user opens a menu, they deserve a clear and satisfying animation when it closes.

This might surprise you, but even big websites can struggle with exit animations. Take Disney+, for instance. Their user menu smoothly expands when clicked, but then disappears without a trace when you click again. This abruptness can be annoying and disrupt the flow of using the website.

Solving the Problem

So, how do we fix this? It’s a bit tricky because animations rely on elements existing in the code (DOM) to function. But there are solutions!

On exit the menu just disappears without any transition

Here are a few ways to create a satisfying exit animation for your menus:

The Quick Fix (but Maybe Not the Best): We can use a timer to remove the menu element after a short delay, hoping the animation finishes in time. This is easy, but there’s no guarantee the animation will actually complete before the element is gone.

Ensuring a Smooth Exit

Another option is to listen for the completion of the transition, and then remove the element from the DOM. This ensures that the exit animation finishes before the element is removed:

el.addEventListener(“transitionend”, removeElement, true);

Libraries like react-spring can handle exit animations beautifully. They use physics-based simulations to create smooth and elegant effects, saving you tons of coding while making your animations look amazing by handling the exit animation in an easier way.

I hope that this explanation has helped you solve this type of issue.

“It has long been an axiom of mine that the little things are infinitely the most important.”
― Sir Arthur Conan Doyle, The Memoirs of Sherlock Holmes