The hamburglar icon is a perfect example - the whimsey happens after the action is performed (arguably the menu should appear immediately instead of pop out, but it's pretty quick) instead of delaying the action until the animation completes.
The animation is highly distracting. It draws the attention to the button instead of to the menu the user now wants to use. The animation creates a “wow” effect on first use, but that’s exactly the kind of visual affordance you don’t want on a UI element for routine use.
IMO, it works because the button moves much less than the menu itself, which is a large block of color that slides out. My eye is drawn to the larger visual change.
I think it's perfect. It's hard to miss the giant white sidebar that pops up. Actually, I think it's safe to say nobody is going to miss it. Keeping immediate attention on the hamburger icon that now switched to an 'x' gives users information on how to close the sidebar if they wish (as opposed to swiping it left or something). If the "distracting" animation we're omitted, the site could have a different problem that users didn't see the 'x' and now don't know how to close the sidebar. I think this site found a perfect balance on usability.
It’s pretty slow. The movement in isn’t too slow (though it’d be better faster), but I find the little bounce at the end to be slow and disconcerting (that’s not the way a physical spring would go). I’d be inclined to almost double the speed, halve the bounce and speed it up even more.
More interesting is something exposed in the dev tools. I managed to die.
Yeah, I think that bounce at the end could use a bit of tightening up. I would have made it quicker but with less horizontal movement, so it feels more elastic.
Thank you for this, bookmarked. However, I like the original example because the spinning animation on the hamburger menu almost looks like it's directly causing the side nav to appear, as if it were a hand crank. The spinning matches up perfectly.
