Skip to main content


Motion must be functional. It acts to orients and guides the user, informing them of content relationships and reinforcing spatial awareness. Motion fundamentally improves user experience and enhances product quality. Our style is simple and clean. Our tone is dignified, approachable, and informative. We use fast, fluid, and responsive animation choosing subtlety and elegance over exuberance. By removing superfluous elements, we create delight from simplicity and find form within function.

Substantial content

Our content has value that should be reflected in the way it is animated.


While our UI is swift and responsive, our content should also communicate the feeling of mass, taking time to gain and lose momentum.

For on-screen transitions, use a short ease-in and long ease-out. Avoid linear transitions.


Animation demonstrating an ease-in/ease-out curve.
Use an ease-out curve for entrance animations.
Animation demonstrating an ease-out curve.
Use an ease-in curve for exit animations.
Animation demonstrating an ease-in curve.


Animation demonstrating a linear curve.

Structural integrity

Avoid having elements pass through each other, thereby breaking their structural integrity.


Animation showing elements moving around each other.
Animation of elements moving in a line without overlapping each other.


Animation showing elements moving through each other.
Animation of elements passing through each other as they enter screen.

Quality and tone

Motion brings a unique voice to our work. Wherever motion is used, it must be in harmony with its surroundings and feel polished and professional.


The way a page loads makes an immediate impact on both quality and tone. Items do not simply appear, nor do they shift about as other elements load. Use short fades to introduce new items, and cascade item entrances from the top down.

Item entrances use short fades or translate in from off canvas. Cases where elements appear instantly are limited to direct user interaction.


Elements animating into view in visual order.
Use short fades.
Animation of short fade and slide into view.
Translate in and from off canvas.
Animation of element that begins outside the viewport frame.
Only use instant feedback for user interaction.
Cursor animation triggering immediately on entrance of an element.


Elements animating into view that’s inconsistent with visual order.


An abundance of motion creates unnecessary noise and impedes performance. Keep motion clean, elegant and scalable by limiting transition distances, durations and directions.


Where possible, avoid animating elements in multiple directions.


All elements animating in a single upward direction.


Elements animating upward and left to right at the same time.

Guide the user

Motion creates a sense of space. It engages and guides users through space by reinforcing content hierarchy and revealing user opportunities.

Visual hierarchy

Use motion to reinforce content hierarchy.


Animation showing most important elements loading or appearing first.

Suggest new spaces

Use directional transitions to suggest off-screen opportunities for navigation.


Animation illustrating directional transition.

Source of interaction

Help maintain a sense of space and teach users where items can be found by animating from the source of interaction.


Element animating outward from the source of interaction.
Element animating down from the source of interaction.


Element animating to the source of interaction.


Use persistent elements to maintain continuity.


Animation of elements appearing around a persistent central element.
Use direction to inform the user of content connections.
Animation of element moving toward a related element implying connection.

Engage the user

Use motion to engage the user and draw attention to priority content.

Call to action

Use animation to emphasize items and teach users which items are actionable.


Animation of an indicator moving over an element to show it is actionable.


Feedback animations are engaging. Feedback informs content relationships, shows system intent or reveals additional information.

Inform content relationships.
Hover-state animation demonstrating a content relationship.
Inform the user of system intent.
Hover-state animation demonstrating a system intent.
Reveal additional information to encourage user exploration.
Hover-state animation shows more content to encourage user exploration.