Animations are about communicating how the interface works. Animations should primarily reinforce mental models of the users.

Animations are usually good for:

• reinforcing a mental model e.g. sliding button on send
• entertainment e.g. during loading or in marketing material
• as a reward e.g. bouncy success on submit

Keep animations short but noticeable. A good formula is to take a guess and half that.

Common transitions:

• Fading In/Out: When removing an item, fade it away and show a hole that and use animation to move items close the hole. When creating an item, first move elements to make room for it and then fade it in.
• Zoom Back: When a drag fails, the item goes back where the drag started.
• Spotlight: Temporarily highlight an item or field that was just added or modified. Fade the highlight away in a second, but keep the highlight longer if user can't currently see the element.
• Sliding In/Out: Carousels and inline tool groups should utilize sliding animation to bring in the additional content. Animations should be less than a half of a second.
• Movement: Moving an element from location A to B highlights where it went.

The more rapid the change, the more important the event. Rapid movement is seen as more important than rapid color change. Movement toward the user is seen as more important than movement away from the user. Very slow changes doesn't disrupt the user.

There are various technologies to do web UI animations with, from the easiest/slowest to the hardest/fastest:

• CSS: write style markup
• SVG: edit vector shapes
• Canvas: write to a 2D pixel buffer
• WebGL: write OpenGL for 2D/3D

Physics based animations are for stuff that can be interrupted or interacted with. Otherwise you are wasting resources in the physics simulation as the animation is always constant.

Opacity and transforms are generally the most performant CSS properties to animate. These can be offloaded to the GPU.

You may need a translateZ(0.1) transform if you wish to benefit from GPU acceleration on your CSS animations, depending on platform.

You should try to use window.requestAnimationFrame(). This waits until the browser is actually ready to start building the next frame of your animation.

Sources

• Designing Web Interfaces, Bill Scott, Theresa Neil