Animation guidelines
Animations can be utilized to provide feedback, add delight and educate users. They should be purposeful, helpful and accessible.
When to use
Animations should help a user complete a task. Ask yourself, what purpose does this animation serve? Does it help a new user understand a flow in the product? Does it help showcase something is processing or loading?
Product animations typically fall into one of four categories:
- feedback
- transitions
- education
- celebration
While celebratory animations typically occur on illustrative elements, like icons or illustrations, the other types of animations often apply to UI elements, like buttons or modals.
Animating UI elements
UI elements refers to controls on a surface, like a card, button, overlay panel or Pin.
Feedback
Animation is often used to provide feedback to the user that an action they took was successful. For example, a button may shrink when pressed or tapped to indicate to the user that the button was successfully interacted with. Similarly, a loading spinner may appear after a user submits a form to help indicate to the user that the form was submitted successfully and a process is beginning. Another example could be a card that grows slightly when hovered/focused to help indicate which card a user is interacting with.
Transitions
Another common use case for animations is to show a transition between two states in the UI. For example, a search icon button may expand into an input field when interacted with, or an overlay panel may slide in from the side of the screen to draw attention to it. Transitional animations help draw the user's attention to particular pieces of the UI, ideally helping them complete a task.
Transitional animations should also follow an intuitive flow. For example, a drawer that appears from the bottom on mobile should slide up from the bottom of the screen and slide back down upon dismissal.
Education
Animations can also be used to help orient a user to the navigation or structure of an application. For instance, a new user may see a Pin shrink and navigate toward the profile menu item to help inform the user that saved Pins can be found in the profile menu. Another example could be a guided onboarding education tooltip that moves around the screen as it points to different features of the application.
Animating illustrations and graphics
Illustrations and graphics refers to non-structural elements, like an icon or the line of a graph, or imagery, like confetti or empty state illustrations.
Celebration
Celebratory animations can be used to help a user feel accomplished after a certain event has occurred or add interest to an otherwise stagnant process. For example, confetti can be used to indicate a process has been completed successfully, like creating a first board while onboarding onto the app. Alternatively, graphics in an onboarding flow can be animated to draw attention and add interest to a multi-step modal.
In general, illustrative animations add delight but are not critical for a user’s understanding of a task or feature. Because they are additive and not required, they should be used sparingly during high-value moments where an animation would be delightful and not distracting.
Where to use
The type of product should help inform what type of animations to use. While feedback-based animations may be helpful in a business product, celebratory animations may not be. Again, consider if the animation is helping a user finish a task, or distracting them from getting things done efficiently. In a business product where users are intimately familiar with a task they perform multiple times a day, animation may negatively add to the time they spend on a process. Use a celebratory animation for rare moments, like the first time a user successfully creates a campaign, and not for completed tasks that happen frequently.
Treatment guidelines
Choosing objects to animate
When an element is animated, avoid animating sub-elements contained within that element. For instance, if a Card grows when hovered/focused, any buttons or text elements within the Card should not also be animated.
Axis considerations
Animations along an axis can be used to show transitions and educate users about navigation patterns. For example, items could animate along the z-axis to help relay stacking or depth, while items animated along an x-axis or y-axis can help relay navigation patterns, like an overlay panel that slides in and out from the side of the screen, or a toast that pops up from the bottom of the screen.
Animation origin
Keep transitions direct, meaning the animation starts from a logical location that gives the moving object the shortest distance to travel to its final destination. In other words, do not animate a toast from the top of the screen down to the bottom of the screen if the final resting point is the bottom of the screen. Instead, begin the animation from the bottom of the screen.
Also consider collisions when choosing animation origins. If notification cards can stack, they may animate in from the top right of a screen, but fade out to avoid colliding with incoming notifications.
Duration
Animations should be direct and purposeful, meaning they only last as long as necessary to achieve the desired affect. For accessibility reasons, avoid animations longer than 5 seconds. Most animations happen in a matter of milliseconds to avoid distracting the user. In most cases, aim to keep animations under one second. In the future, we will provide design tokens for desired durations in product.
Easing and velocity
The timing function of an animation should be determined by the property and object being animated.
Properties unrelated to motion (like color and opacity) will not likely benefit from easing and can be done linearly. For example, a background color of a button that expands or changes upon hover can happen linearly as it provides feedback to the user about their cursor position.
However, people experience motion non-linearly, so objects being moved can benefit from an easing timing function. For example, an object transitioning onto the screen from the right side may use ease-out as it slides into view to create visibility as fast as possible, and then ease-in upon its departure to create a smooth transition back to the main screen. Learn more about easing functions
Accessibility
Animations should never cause a user harm or distract from a necessary task. However, inaccessible animations have the potential to cause seizures, motion sickness, or anxiety in users, so we must ensure we are creating accessible animations every time.
Below are 3 key considerations for accessibility. Note: these do not apply for “essential” animations, where essential is defined as any animation where “if removed, would fundamentally change the information or functionality of the content, and information and functionality cannot be achieved in another way that would conform.”
Looping animations
Ensure that any animation that is moving, blinking, scrolling or auto-playing and lasts longer than 5 seconds has an affordance for pausing and resuming the animation or an option to hide the animation.
Looping animations should be avoided whenever possible, as they can become distracting very quickly.
Further reading: WCAG 2.0 Pause, Stop Hide requirements
Flashing animations
Ensure that there are no flashing animations present, where flashing is defined as anything that flashes more than three times in a one second period.
Further reading: WCAG 2.0 Three Flashes requirements
Reduced motion user setting
Any non-essential animations should automatically be disabled when a user enables the reduced motion setting on their device. For Web, we have provided a useReducedMotion hook to make this easy to implement.
Further reading for Web:
MDN prefers-reduced-motion guidelines
Further reading for iOS:
Apple developer guidelines