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.

Animation should always serve a purpose. Motion helps users reach their goals by guiding them through the complexity of an experience.
Motion should feel familiar and expected. Fluid, seamless motion make the experience feel natural, and mirrors objects in motion in the real world.
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.


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.


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 Incubic-bezier(.35, 0, .7, .2)
Motion Ease In Outcubic-bezier(.4, 0, .3, 1)
Motion Ease Outcubic-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 / 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.

Motion Duration Fast0.15s
Motion Duration Medium0.3s
Motion Duration Slow0.7s

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

Good news!

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


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