Lucid: Motion Guidelines
Edit UI
Introduction
Motion and animation adds an extra dimension to digital design by adding physicality to otherwise 2-dimensional UI elements. The cohesive rhythm of motion and animation make digital touchpoints feel as sophisticated and delightful as ones in the real world. Overall, carefully orchestrating physicality of a product helps users orient themselves, by making patterns feel consistent, and thus enhances the user’s experience.
Duration
TL;DR Duration defines how fast an element is moving on the user interface. Avoid using same duration (e.g. 300ms) everywhere and choose cohesiveness over consistency. Sweet spots are 200 - 300ms. Stay within 70 - 7000ms.
Duration defines how fast an element is moving on the user interface. In the physical world, objects moves at different speeds and the speed of an object is governed by its weight and friction. Heavier objects naturally take longer time to shift around. Similarly, on the digital interface, large movements should take longer to move. Objects that convey large amounts of information, such as an error message, should also transition slowly to give sufficient amount of time for the users to digest the information thoroughly. Overall, cohesiveness in duration matters more than the consistency in making the pattern feel consistent.
Variables
0
$duration-shorter: 70ms
$duration-short: 100ms (one tenth of a second)
$duration-base: 200ms
$duration-long: 400ms
$duration-longer: 600ms
$duration-message: 2500ms
Easing
TL;DR Easing defines how an object in motion accelerates over time. Carefully curated easings help define characters to movements and adds fun in the interaction. (In reality, things rarely move linearly. Normal "ease" just doesn't cut it.)
Easing defines how an object in motion accelerates over time. In the real world, how one enters a room often looks different from how one exits. Asymmetry of the entrance and exit brings the digital interaction closer to the one in the real world. Users tend to prefer an element to decelerate (ease-out) when they are asking the computer to do something, whereas when they are expecting an answer or reaction from it, they prefer it to accelerate (ease-in).
Variables
ease
ease-in-out
ease-in (accelerates)
ease-out (decelerates)
linear
$easing-accelerate-1 cubic-bezier(.67, 0, 0, 1)
$easing-decelerate-1 cubic-bezier(0,.22,.12,1)