On directing animations

Came across this small article by Paul Lewis reminded me of the importance of proper animations in UI. It's almost like directing a movie, every frame has to be put there thoughtfully. Thoughtlessly throwing a bunch of random transitions into your page or app would likely end up irritating the user if he uses the interface for at least a minute.

But without further babbling on the matter, here are some basic tips:

• Do ease. Make sure you use a non-linear easing function at all. In real world, there's almost never such thing as "linear" movement. Even your Roomba iRobot speeds up and slows down on its way around your house!
• Ease out. When responding to user action, in most cases you want to ease out. That way our user gets served the requested information fast, without that "slowing" in the beginning
• "Expand fast, contract slower", as Paul puts it. More generally, this means making opening actions faster than closing actions, precisely for the reason given previously: when the user requests information, he wants it to appear ASAP (and often zero animation is fine too!), however he's not focused on the task anymore, we can add a little bit of extra smoothness when closing that lightbox or collapsing that menu
• Experiment. Spend time on that stuff. Don't just leave the parameters at their default and move on, play with animation durations and easing functions and see if you can fine-tune user interaction here. Speaking of easing functions, jQuery has a number of predefined variants. While you typically don't want to use something like bounce easing for a site's main menu, such funky effects may find a use if they're not frequent. Just keep in mind that's possible with custom easing functions.
  

BONUS TIP: No animation is better than one that stresses out.
Animated transitions are supposed to enhance the experience by guiding the user through his task flow in a friendly and natural way, not cause epileptic seizures or cognitive dissonance. If you're not ready to sit down and spend some time on carefully engineering those transitions, it's better to just leave your interface animation-less for now. If you change states with JavaScript, just make sure you're toggling the appropriate CSS classes on elements, that way you will be able to easily add animations later without touching the business logic.

For more details and illustrations see Paul's article: http://aerotwist.com/tutorials/protip-choose-your-ease/