Matchbox uses motion to provide guidance, clarity and focus to a UI.
Consistent movement improves an experience by visually describing connections and spatial relationships between states and views, drawing attention to importance or providing appropriate feedback.
IntentionalAnimation should always serve a purpose. Motion helps users reach their goals by guiding them through the complexity of an experience.
IntuitiveMotion should feel familiar and expected. Fluid, seamless motion make the experience feel natural, and mirrors objects in motion in the real world.
ContextualMotion should tie back to the user's interaction. It provides appropriate feedback by aligning to the way an experience is used or manipulated.
UI Animation Concepts
Describes changes in an object's velocity over time as it travels.
Easing reinforces movement by contributing to the naturalism and seamlessness of an experience. Objects move in a manner that is intuitive and behave as users expect them to.
Starts slow and ends fast. Imagine dropping a ball to the ground. This easing curve is typically used to remove objects from view.
Starts fast and ends slow. Think of throwing a ball in the air and slowing down as it reaches its peak. This function is typically used to introduce objects to the view.
Ease In Out
Starts slow, speeds up, then ends slow. Think of a car accelerating and coming to a stop. This curve is typically used to move objects from one location to another.
|Motion Ease In||cubic-bezier(.35, 0, .7, .2)|
|Motion Ease In Out||cubic-bezier(.4, 0, .3, 1)|
|Motion Ease Out||cubic-bezier(0, 0, .3, 1)|
The amount of time it takes for a transition to take place
Animation duration is closely related to how large the object in motion is, the distance it travels, and whether the object is entering, exiting, or transitioning.
Fast / Near / ExitUse for objects that do not move, move a distance of less than 25% of the view, or are exiting the view.
Medium / EnterUse for objects move a distance of less than 50% of the view, or are entering the view.
Slow / FarUse for objects move a distance of more than 50% of the view, or are large in size.
|Motion Duration Fast||0.15s|
|Motion Duration Medium||0.3s|
|Motion Duration Slow||0.7s|
UI Animation Examples
Fade In and Out
The entrance of the snackbar in this example uses medium speed with ease out, while the exit uses a fast speed with ease in.
Fast transitions typically take place in small common interactions, think buttons, links, menu items, or anything that does not transform.
Slow and Large
A large animation would use a longer duration, think of pages, empty states, or large overlays.