User Interface

UI Animation

Motion makes the user interface (UI) more personal and interactive. It provides a response, helps navigate, highlights next steps and adds a uniqueness to the digital product and the user experience. Based on our motion principles, animations should be simple, fast and meaningful.

UI Animation
  • Duration
  • Easing
  • Movement
  • Examples

Duration

DPDHL Group user interfaces respond fast. Choosing the right animation duration is crucial to enhance the experience without slowing users down. The duration typically depends on the size of the elements and the distance they cover. Use the table below as a guide to help you choose the right duration for your animations.

Animation type

Duration

Micro animation

General status indicators, pressed buttons

0.15s

Component update
Alert display, button hover

0.3s

View change
Modal animation

0.4s

Page transition

0.55s

Easing

Elements move using natural easing curves. That means elements have the ability to speed up or slow down. Using this makes the UI feel responsive and fast. Incoming elements use an ease-out transition, which starts fast and slows down at the end. This transition also applies for user-triggered actions. Outgoing elements use an ease-in transition that quicky performs the action. 

From left to right: easeInCubic: cubic-bezier(0.55, 0.05, 0.68, 0.19), easeOutCubic: cubic-bezier(0.22, 0.61, 0.35, 1), easeInOut (Custom): cubic-bezier(0.3,0.2,0.35,1)

Movement

Subtle movements of elements can help users navigate through the interface. Focusing on horizontal and vertical movements adds simplicity and gives a unique look to your user interface. To avoid confusion, your UI animations should be based on common movements and behavior. 

Examples