The human eye and brain is tuned to deduce effects from action that involve movement like in the real world, and a seemingly small detail like good animation can help make an interface more friendly.
The human eye and brain is tuned to deduce effects from action that involve movement like in the real world, and a seemingly small detail like good animation can help make an interface more friendly.
When you click the icon, you aren't thinking "I want to turn the icon into a big X." Instead, you're thinking "I want to see the menu." An animation that turns the hamburger into a big X in a flashy way has nothing to do with the goal you had in mind when clicking it. It's just a distraction.
Unfortunately, many designers are drawn toward flashy, distracting, irrelevant animations like this.
A good example is Office 2016 for OSX. It has a bunch of new animations, including two that are especially bad:
1) When you click a cell, it doesn't just highlight the cell like any other spreadsheet. It animates the outline cursor from the previously selected cell to the new one. But when you click on a cell, that very cell you're clicking on is where your attention is focused. You're done with the previously selected cell and no longer thinking about it. The animation from the old cell forcibly draws your attention back to the old cell, the one you're no longer interested in.
2) When you click one of the Ribbon headings, the entire new ribbon does a little sideways animation before settling into place. The animation goes either to the left or right, depending on the relative positions of the previously selected ribbon heading and the new one. It's as if they were trying to give the appearance that the ribbon is one big long continuous strip and the animation shows the correct part of the strip sliding into place - but they only show the very last part of that movement. This animation has nothing to do with what you wanted to do when you clicked the ribbon heading. It's very distracting and disorienting.
There is a bit of good news for Excel users. Microsoft is going to provide an option to turn off these animations, after a request to remove them attracted over 2000 votes:
https://excel.uservoice.com/forums/304933-excel-for-mac/sugg...
Of course, making it an option means that most Excel users will never find that option and will just live with the distracting animations.
Bingo. I clicked through all of them, wondering why there is a need for so many different animations showing that the hamburger menu is disabled/inactive.
I got to the last one and I didn't find it jarring.
I find meaningless animations a waste of time ==> i.e. anything but a spinner to indicate "currently busy" I get frustrated at because it's forcing me to wait before getting to the next step.
I also didn't find the last one jarring, why would it take more than a blink to slide out side menu (or vice versa) on an SPA unless doing some ajax loading for side menu content (can't see why this can't be avoided though)?
A cross-fade is almost certainly the best animation to use here. The progress of the cross-fade can follow the motion of the sheet or menu, reinforcing the connection between the button and the action, but without being overly distracting. The focus should be on the content of the sheet or menu, not the button itself.