Design Basics

Motion Principles

Motion is one of the most powerful ways to enhance emotional bonding with our Brand. Because our claim of Excellence. Simply delivered. stands for speed, reliability, and simplicity, 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.

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


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 avoid viewers waiting longer than necessary, 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.