Design Basics

Motion Principles

The motion seen in our videos, animations, and user interfaces should be straight and simple, energetic and fast, and clear and meaningful. This guide provides an overview of these motion principles and some Dos and Don’ts to help you apply them.

Principles
  • Principles
  • Easing and duration
  • Dos and Don’ts

Principles

Motion is straight and simple

Just like our layout principle and gradient module, our motion elements move horizontally and vertically.

Motion is energetic and fast

Inspired by the natural forces of the real world, our motion should feel natural and real. Make the movements quick enough to keep viewers interested, but not too fast that they don’t understand what’s going on.

Motion is clear and meaningful

Motion provides orientation – it points the eye to just the right spot at just the right time. Create a clear path – a clear flow of action – for the viewer and avoid showing too much at once.

Easing and duration

Make elements move along a natural easing curve, which gives your elements the ability to speed up or slow down. The duration depends on the size of the elements and the distance they cover. Use an ease-out curve for incoming elements and an ease-in curve for outgoing elements. To make your user interface feel responsive and fast, use an ease-out curve for user-triggered motions in animations.

Ease-out curve

 Ease-in curve

Dos and Don’ts

Animate elements with a natural easing curve (ease in and ease out).

Don’t create motion elements that bounce.

Make motion quick enough to keep viewers interested.

Don't slow down the motion to the point that you keep users waiting.

Create motion elements that move either horizontally or vertically.

Don't create motion elements that move diagonally.