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.
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.
Avoid having elements pass through each other, thereby breaking their structural integrity.
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.
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.
Guide the user
Motion creates a sense of space. It engages and guides users through space by reinforcing content hierarchy and revealing user opportunities.
Use motion to reinforce content hierarchy.
Suggest new spaces
Use directional transitions to suggest off-screen opportunities for navigation.
Source of interaction
Help maintain a sense of space and teach users where items can be found by animating from the source of interaction.
Use persistent elements to maintain continuity.
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.
Feedback animations are engaging. Feedback informs content relationships, shows system intent or reveals additional information.