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.
-
Duration
-
Easing
-
Movement
-
Examples
Duration
DHL 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 |
0.3s |
View change |
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
