Motion Duration and Speed
△ Motion duration in interfaces
On mobile devices such as phones, Material Design recommends keeping motion duration between 200 and 300 milliseconds. On tablets, it should be about 30% longer, or approximately 400 to 450 milliseconds. The reason is simple: on a larger screen, an element must travel farther, so at the same speed the movement naturally takes longer. On the smaller screens of wearable devices, the duration should be reduced by 30%, to roughly 150 to 200 milliseconds.
However, if the motion on a web page is not functional but decorative or intended to attract attention, disregard this rule. In those situations, the motion can last longer.
Larger screen = slower motion? Absolutely not!
For elements of the same size, the element traveling the shortest distance should stop first.
△ Motion duration also depends on element size and travel distance
Movement should follow the laws of physics. When elements reach a boundary and collide, the energy of the collision should ultimately be distributed evenly. Bounce effects are inappropriate in most situations and should be reserved for specific cases.
△ Do not use blur effects in motion
For list items—such as news or email lists—there should be a slight stagger during movement. Keep the delay between elements to about 20 to 25 milliseconds. A longer interval may make the interface feel sluggish.
Easing
To keep motion from feeling mechanical or artificial, elements should accelerate and decelerate progressively, like objects in the physical world.
Linear Motion at Constant Speed
Motion at a constant speed with no apparent physical force looks highly unnatural, especially to the human eye.
△ Graph of linear motion at constant speed
Uniform transitions are typically used only for changes in color or opacity. Background elements can also move at a constant speed while foreground elements remain unchanged to communicate a state, as shown above.
Ease-In Acceleration Curve
△ Acceleration curve
This acceleration curve can be used when an object accelerates off the screen, such as a card dismissed by a user's swipe gesture. Remember to use it only when the moving object needs to leave the interface completely. It is not appropriate if the object must return.
When an element enters from outside the screen, the motion should follow this type of curve. It begins at full speed, then slows until it comes to a complete stop.
△ Example of a deceleration curve
△ Difference between symmetric and asymmetric motion
When an element moves from one position on the screen to another, it is best to use a standard easing curve. Avoid drawing attention to the animation or using a dramatic effect.
△ Drawer navigation hides from the screen along an easing curve
These examples show that many motion-design beginners do not yet understand movement principles. In the example below, the element appears along a deceleration curve and disappears with a standard easing curve. Under Material Design guidelines, a newly appearing element should have a longer duration because it needs to attract more attention.
To simplify your understanding of Bézier curves, we recommend two websites, including cubic-bezier.com . The first contains a list of common curves that can be copied into a prototyping tool, while the second provides parameters for different curves so you can see how various objects move.
Equal interaction means that every element and object follows a specific choreography.
△ User attention should be guided in a clear flow
Grid-based layouts are more complex. The user's eye should follow a clear diagonal path, so revealing blocks one by one is a poor design choice. Sequential appearance takes too long and can make the loading pattern feel jagged and inconsistent.
Dependent Interactions
In some designs, users struggle to identify the primary element because their attention is divided. If multiple elements are animated, clearly define the main element and focal point, then reveal the related child elements in an order that reflects their dependency.
When there is only one central object, the movement of every other object should be governed by it. Otherwise, users cannot distinguish primary from secondary content.
△ When an object's appearance changes disproportionately, its path should follow an arc
When an element changes size proportionally, by contrast, it should move along a straight line. This is easier to operate and better reflects a uniform change. In real examples, a straight path appears more natural.
How should the direction be chosen? The answer is straightforward: the direction of the element's movement curve should converge with the primary axis of motion in the interface. In the example below, the entire interface scrolls vertically, so the primary axis is vertical. When a card expands after a click, it first moves horizontally to the right and ultimately ends with vertical movement. Its final tangent is vertical and therefore aligns with the interface's vertical primary axis.
This principle is not absolute. In a crowded interface, an element may pass “over” other elements. It does not disappear through them; it simply moves across them. In a sense, this still follows familiar physical rules because we implicitly treat interface elements as having height in this situation.
Conclusion
When motion is designed correctly, it should be unobtrusive and should not distract users. If it does, make the motion subtler or remove it altogether. Motion should never obstruct a user's control of the interface or divert attention from the task.
Even with all these principles, motion design remains an art rather than a pure science. Continued testing and exploration are always necessary.
