A collection of timing and easing guidelines from various Design Systems
Collected by tanvi c
Easing is a way to control the velocity of an object as it travels, it helps make animations and movement feel more natural.
Strictly linear movement tends to appear unnatural to the human eye. Ideally, elements should accelarate fast and deaccelarate smoothly.
When deciding durations for animations, there needs to be a balance of being slow enough to give users the possibility of noticing the changes, but alos be quick enough to not cause waiting.
200 to 500 ms is a good range to start interface animations with:
-Extremely small effects such as hover, fade, or scaling animations - 100ms
-Small UI animations that involve smaller elements or small amounts of change - lower end of 200 to 300 ms
-Larger motions that cover a lot of ground, or motion that uses complex bounce and eleastic easing - 400 to 500ms
References + Sources:
Response Times by Nielsen Norman Group
How fast should your UI animations be? by Val Head
The ultimate guide to proper use of animation in UX by Taras Skytskyi
In regards to easing, Fluent has two major methods of easing applied to various applications
Fast Out, Slow In
cubic-bezier(0, 0, 0, 1)
Used for objects or UI entering the scene, either navigating or spawning. Despite the moment of
apparent unresponsiveness, the overall velocity of the incoming object
gives the effect of feeling fast and responsive. Link to view easing
Slow Out, Fast In
cubic-bezier(1 , 0 , 1 , 1)
Used for objects or UI exiting the scene. With objects gaining momentum until they reach escape
velocity, viewers are left feeling like the object is trying its best
to get out of the way as fast as it can and making room for new objects. Link to view easing
Lightning also uses two buckets of Easing
Ease Out
Used as a reactive motion, triggered by user interaction. This makes the overall motion feel faster, the click or tap interaction triggering the motion acts as the ease in.
Link to view easing (set duration to 0.5s)
Ease In and Out
Used as a proactive motion, triggered by system events. This easing has elements pop in, exist, and the fade out. These need to be used in a manner so as to not
overwhelm the user, avoid showing too many at a time and look for opportune moments to use it (preferably not in the middle of a task).
Link to view easing (set duration to 0.5s)
Carbon defines their two two buckets of motion as productive and expressive motion, within which you have three variations of easing: standard easing, enterance easing, exit easing.
Expressive motion is applied in the case of significant moments such as opening a new page, clicking the primary action button, or when the movement itself conveys a meaning. System alerts and notificaiton boxes coming into view are good spots to use expressive motion
Productive motion is generally used for microinteractions, it creates a sense of efficiency and responsiveness while remaining subtle.
Standard Easing
Used mainly when an element is visible from the beginning to the end of a motion.
Productive: cubic-bezier(1 , 0 , 1 , 1) Link to view easing (set duration to 0.5s)
Expressive: cubic-bezier(0.4, 0.14, 0.3, 1) Link to view easing (set duration to 0.5s)
Materials two sets of motions fall into Emphasized and Standard. Emphasized easing is used whenever possible to capture the expressive quality of M3. Standard easing is used on small or utility focused transitions.