Guidelines

Use animation to engage & draw attention

Motion makes a page feel more alive. Use simple animations to create intrigue without distracting from your message.

Example of animations on the Real Thread home page

When motion is overused, it can become a distraction. When used correctly, animation can draw attention to areas where you want to make the most impact.

In the above example from Real Thread, you're greeted with a simple page load animation that introduces the brand (in the navigation), drops the main heading into the frame (telling what they do), then finishes with the calls-to-action fading in.

Nothing is ever really still in the world around us. Experiences with subtle movements feel natural, creating a much more interesting experience that just feels right.

But don't go overboard. Uncoordinated motion from all directions can overwhelm visitors. The ideal experience would resemble a peaceful walk in the park rather than a jog through Times Square.