Motion

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.


Intentional
Animation should always serve a purpose. Motion helps users reach their goals by guiding them through the complexity of an experience.
Intuitive
Motion should feel familiar and expected. Fluid, seamless motion make the experience feel natural, and mirrors objects in motion in the real world.
Contextual
Motion should tie back to the user's interaction. It provides appropriate feedback by aligning to the way an experience is used or manipulated.

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.

Example

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.

Example

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.

Example

Motion Ease Incubic-bezier(.35, 0, .7, .2)
motionEase_in
Motion Ease In Outcubic-bezier(.4, 0, .3, 1)
motionEase_in_out
Motion Ease Outcubic-bezier(0, 0, .3, 1)
motionEase_out

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 / Exit
Use for objects that do not move, move a distance of less than 25% of the view, or are exiting the view.
Medium / Enter
Use for objects move a distance of less than 50% of the view, or are entering the view.
Slow / Far
Use for objects move a distance of more than 50% of the view, or are large in size.
Example
Fast
Medium
Slow

Motion Duration Fast0.15s
motionDuration_fast
Motion Duration Medium0.3s
motionDuration_medium
Motion Duration Slow0.7s
motionDuration_slow

The entrance of the snackbar in this example uses medium speed with ease out, while the exit uses a fast speed with ease in.

Example
Good news!

Fast transitions typically take place in small common interactions, think buttons, links, menu items, or anything that does not transform.

Example

A large animation would use a longer duration, think of pages, empty states, or large overlays.

Example