Motion guidelines
Animation should help the user to accomplish various tasks, for example, to provide feedback, add delight and educate users. To successfully fulfill our mission, keep these guiding principles in mind when considering adding animation to a product.
Easing
Easing is the timing function of an animation, which helps transitions and animations appear more realistic or natural. As a result, the user experience is improved.
Easing allows movement to mimic motion in the real world - objects accelerate when they start to move, and decelerate when they stop.
Linear motion (or animation without easing) can look sharp and unnatural, but it's useful for smoothly animating properties unrelated to motion, like opacity and color.
We have six easings that you can use for different purposes:
Expressive ease
Function: cubic-bezier(0.55; 0; 0; 1)
Recommended duration: depends on element size
Usage: moving, pushing
The most commonly used easing, and a reliable default choice when unsure. A curve is suitable for elements that both begin and end within the user's field of view, such as an object undergoing size or position changes. It is also appropriate for elements that enter or exit the view, particularly if they are moving in synchronization with other elements that also begin or end within the user's field of view.
Usage examples: Pin opening/closing, Board opening/closing, Buttons animation, Forward and backward transitions
Examples in product
Enter ease
Function: cubic-bezier(0.05; 0.7; 0.1; 1)
Recommended duration: 300-500ms
Usage: entering
Curve is commonly used for elements that initially exist out of view and smoothly enter into the screen. Additionally, this curve is also appropriate for elements that need to snap into a specific position after being released from a drag interaction.
Usage examples: any enter transition
Examples in product
Exit ease
Function: cubic-bezier(0.3; 0; 0.8; 0.15)
Recommended duration: 200-300ms
Usage: passive exiting
Curve is commonly used for elements that begin within the user's field of view and passively disappear from the screen without any direct interaction from the user.
Usage examples: any exit transition
Examples in product
Lateral ease
Function: cubic-bezier(0.8; 0; 0.2; 1;)
Recommended duration: 400-500ms
Usage: This easing is commonly used in animation for smooth horizontal transitions of elements that are at the same level of hierarchy, like swiping between tabs of home feed or carousel of search page. It creates a natural-looking movement by starting slowly, accelerating in the middle and slowing down towards the end.
Usage examples: navigation between tabs of home feed, navigation between tabs Pins/Boards (Created/Saved), navigation between tabs Updates/Messages, carousel of search page
Examples in product
Bounce ease
Function: cubic-bezier(0; 0.4; 0; 1.4;)
Recommended duration: 100-200ms
Usage: Easing is used for light and fun motion that allows users to interact with Pinterest_._ This easing is commonly used for animation of floating elements, as a toolbar, thereby emphasizing their weightlessness.
Usage examples: Toolbar
Examples in product
Linear ease
Function: cubic-bezier(0; 0; 1; 1;)
Recommended duration:
Usage: for properties unrelated to motion (like color and opacity). 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.
Usage examples: Toggles, Checkboxes, Buttons, Text field
Examples in product
Durations
Duration is the time taken to complete any transition, interaction, and animation.
Transitions should not be too fast or too slow, as this can make users feel rushed or impatient. To achieve smooth and responsive transitions, it is important to find the right balance of duration and easing.
Durations are chosen based on these criteria:
- Transition size (that are based on the distance or the size of the object or element)
- Transitions covering smaller screen areas are assigned shorter durations, while those spanning larger areas have longer durations. Scaling the duration based on the transition area size ensures a consistent perception of speed.
Enter vs. exit transitions (enter should be longer than exit)
Shorter durations are applied to transitions that exit, dismiss, or collapse an element, as they require less user attention due to being swift.
On the other hand, enter transitions use longer durations, helping users in directing their attention on new elements appearing on the screen.
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.2 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.2 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:
Appt prefers-reduced-motion iOS guidelines
Further reading for Android:
Appt prefers-reduced-motion Android guidelines