Avoid a user experience that underwhelms by ensuring that your animation inform, entertain and delight your user.
Everyone has seen sites that look like the inside of someone’s brain in the middle of a migraine. It’s tempting to make everything on your site move just because you can, but animation is a secret sauce and it makes the most impact when it’s been used thoughtfully.
First of all, don’t overdo the attention grabbers. You know those sites that put up a model survey or subscription dialog just when you’re about to get to the information you want? Don’t do that. Users hate anything that makes them feel like they’re not in control of the browsing experience it’s the same story with attention grabbing animation. Use them to hint to users that they can do something they might have missed, not to distract them from what they’re already doing.
You should also make use of animation to highlight context and hint at navigation features. For example, if your site use a map, you can use animated sidebar to display useful location information. The sidebar content change all the time, and the animation can be helpful in reminding users to see on each page, while keeping other navigation option visible. Features that resize automatically are a good way to pack a lot of detail into a limited space, without sacrificing relevance.
Consider telling a story. You can do this literally by animating a cartoon – but that’s more work than most sites need. A story is a way to control how information is revealed and good stories keep users interested they became curious about what happen next. A popular styling at the moment is the full-page scroll. The ‘story’ suggests that there’s more to read. This kind of scroller is better at keeping user interest than a menu tree, because with the menu system there are no surprises and users are more likely to decide to skip some of the content.
Make it physical. You can bounce object, squash them, shake them and vibrate them the math isn’t complicated and simple physics modelling helps make animation looks convincing by imitating mass and inertia. If your standard animation aren’t physically believable, users are going to find them more distracting than rewarding. As an occasional special effect you can also make an object do something believable but surprising, for example, making an image that bobs and float upwards like a balloon.