Responsive navigation menu: With or without animation?

Question

When it comes to responsive navigation patterns, I often find myself using the "slide down pattern":

Source

Now there are at least two ways to build something like that:

1. With slide animation like in the animated gif (or example page)
2. Without animation, so the menu simply pops open – not really slide down (example page)

From a web developer point of view, I really like to do it without animation because it's much easier to do, only a CSS class has to be toggled with JavaScript.
Given the fact that it's currently not possible to use CSS transitions to transition to height: auto for the menu, it's also really resource friendly (JavaScript animations can be expensive on CPU).

Still, from a UX point of view, I am afraid that it might be better to use an animation to open the window, so the use actually has a change to follow along with what is happening on the page.

In addition, I often find that menus without animation feel more direct, more "snappier", although I think that it's maybe just a matter of timing the animation.

Are opening animations really necessary because they provide the user with more information, or can I confidently pass on them?

Answer 1

An animation when opening the menu probably likely won't negatively affect the usability much (the user still knows where to click the menu and expects a menu to open). An animation does add some "delight" to the experience because it makes the transition visually smooth and it helps the user follow along with what they selected.

That said, if you are trying to pick trade-offs between what you spend your time developing, I feel like developing an animation to open the menu would be a lower-priority item than more common interactions the user will have with your app.