Authentic motion
Just as the shape of an object indicates how it might behave, watching an object move demonstrates whether it’s light, heavy, flexible, rigid, small or large. In the world of material design, motion describes spatial relationships, functionality, and intention with beauty and fluidity.
Contents
Mass and weight
Mass and weight
In the physical world, forces must be applied to an object in order for it to move. The strength and duration of these forces dictate how quickly an object accelerates, decelerates, or changes direction. Even the most jarring stops and starts are not instantaneous, because it takes time for an object to speed up or slow down. Consequently, when animations have abrupt starts, stops, or changes in direction, they appear unnatural.
Motion in material design should embrace the familiarity and real-world behavior of physical objects, without sacrificing elegance, simplicity, and beauty.
Natural acceleration and deceleration
Changes in acceleration or deceleration should be smooth across the duration of an animation.
To draw attention to an object for a specific purpose, or to add character to an animation, vary its change in speed when starting and stopping.
Asymmetric acceleration and deceleration creates a more natural and delightful motion.
When acceleration or deceleration isn’t smooth, movement appears mechanical. Abrupt changes in speed or direction are jarring and draw attention.
Avoid linear motion.
Entrances and exits
Changes in an object’s speed and direction draw user attention.
An object’s change in speed as it enters or exits the frame suggests the distance it is traveling. For example, slowing down while exiting draws attention and implies the object will stop near the frame edge.
During transitions in particular, consider what portion of the entrance or exit should receive the most attention.
Do.
Changes in the ball’s speed emphasize its arrival at and departure from the resting position. Attention is minimized when the ball enters and exits the frame at a near-constant speed.
Don't.
Speeding up when entering, and slowing down when exiting, can draw unwanted attention and distract the user.
About easing terms
When discussing timing curves, it is important to understand the definitions being used. The terms “ease in” and “ease out” are used in both traditional animation and UX animation. However, depending on the context, these terms have opposing meanings.
Traditional animation
Traditional animation techniques express a sequence of movements through drawings of key poses. “Ease out” in this context refers to motion departing from a pose and “ease in” refers to motion entering a pose.
Modern animation tools express these key poses with keyframes. “Ease in” and “ease out” in this context refer to motion leading into and out of a keyframe.
UX animation
In the UX context, easing refers to the transition between states. As a result, “ease in” refers to the motion entering the transition, and “ease out” refers to the motion leaving the transition.
Making adjustments
Not all objects move the same way. Lighter or smaller objects may move faster because they require less force, and larger or heavier objects may need more time to speed up.
Use curved motion and avoid linear spatial paths. Identify the qualities of motion best suited to your object, and represent their motion accordingly. Curves represent that change over time, for a particular value range. Find a curve that fits that character of motion you are describing.