Meaningful motion helps make our product easy for everyone and tells our brand's story.
Tip: Looking for the technical animation guide? Check out the Animation Getting Started Guide
We use animation purposefully to:
Every microinteraction animation works well for the first time and the hundredth time.
Aim for a fast time to first interaction of 300ms or less with primary content or data. Supplementary content may have a delay and arrive after the first 300ms.
If there are continually running animations on a page, the motion draws the user’s attention to the most important thing they need to be doing.
We are more adventurous with the amount and size of user-initiated animation than system-initiated. If people want to keep clicking a button because of its fun animations, go wild; for looping animations constantly running on a page, cut back! Note: consider player controls to pause, stop or hide animations. See also: Pause, Stop, Hide: Understanding Success Criterion 2.2.2 from the Web Content Accessibility Guidelines.
To minimize browser jank (stuttering or choppiness), we test our animations to ensure they keep up at 60 frames per second, including in old browsers and devices. If they cannot keep up, that might be a sign of too much animation.
Separate, individual items that are meaningfully different from each other can move separately, with staggered entrances and exits. For example, navigation items that link to wildly different content can enter one after another.
Connected items move together as a single body. We synchronize movement of groups of closely related items.
Placeholder loading skeletons fill the space that its future content will occupy when it's loaded.
A choreographed entrance or orchestrated entrance introduces elements in a sequence, potentially with overlapping action. We “stage” the most important content.
A stylized entrance applies to a single element that may be standalone or part of a choreographed entrance.
Choreographed, stylized entrances focus attention through movement and reinforce our branding and design.
Choreographed entrances are reserved for “red carpet” or “grand unveiling” experiences, such as first use, onboarding, demos, showcasing new features, or landing pages rather than frequently visited pages.
In contrast to a placeholder loading skeleton, choreographed or stylized entrances don’t care how long content takes to load. For example, the whole page might be loaded already, but we only reveal each section with a fade as the person scrolls down the page. A single stylized entrance may mask and replace a short loading spinner.