When to use this guide

✅ Use this guide when applying animations and transitions to UI components

This includes Kaleidoscope components such as buttons and panels, and also feature-specific components such as comments and folders. This type of motion needs to be functional, should not be distracting, and should assist a user in reaching their goals.

⛔️ Do not use this guide for illustrative visuals in our product

This includes visuals like the bouncing logo in our app loading screen, and the supporting illustration in the trial extension modal. These elements need to be comparatively more expressive to elicit a moment of delight, and therefore do not need to conform to the patterns detailed in this motion guide.

Who should use this

• Designers — should use this guide to learn about the patterns in our motion system, and when to apply these to interactions in our product
• Engineers — should use this guide to learn about our animation tokens
• The wider company — should use this guide as an introduction to our motion principles

Principles

When adding motion to our product, it should embody one or more of the following principles.

Easing

In the real world, an object moves at varying speeds depending on its size, distance travelled, and elapsed time. We use easing as a method to simulate these real-world physics in our product UI, with the goal of making experiences feel tangible, familiar, and intuitive to interact with.

"Easing curves" describe how fast or slow an element should move at certain points in time along its motion curve. We use 4 set types of easing curves which we define using timing-function tokens.

⭐ Tokens

Duration

We use duration to describe the length of time it takes to complete a motion. When choosing a duration, consider the type of transition, the size of the motion, and the complexity of the component. Generally a long duration is suited to larger transitions, whereas a short duration is suited to smaller transitions.

We use 3 set durations which we define using duration tokens.

Exit transitions

When an element is closed or dismissed, use a shorter duration. This is because exit transitions require less focus compared to other transitions.

Transition patterns

Sequencing

If a component is composed of multiple moving parts, try offsetting the transition start time of the individual elements. This is called sequencing. Doing this can help create focus inside a complex component, guide the users' attention, and visually group related elements.

We typically use a 50ms timing delay between moving elements.

Translate & fade

A translate & fade transition can be used to establish a relationship between an existing element on screen, and a new element that's being introduced.

As a general rule of thumb —

• Use 8px as the translate value for piece components & small transitions (e.g. tooltips)
• Use 16px as the translate value for small pattern components & medium transitions (e.g. comment thread panel)
• Use directionality of movement to convey and reinforce continuity in a flow or relationships between elements (e.g. moving forward/backward in the sign up flow, button tooltip)

Scale & fade

A scale & fade transition can be used to add or remove an element when it has no direct relationship to a specific part of the view, or when the element is being 'housed' inside a smaller element.

As a general rule of thumb —

• Use 0.8 as the scaling value
• Where applicable, use directionality of movement to convey and reinforce relationships between elements (e.g. a comment marker & thread panel)

Accessibility

Some users experience motion sickness from elements that move or scale on-screen, and will set their motion preference to reduced in their operating system preferences. This does not mean that animation can't be used, but does mean that we need to consider how interactions appear to these users.

For designers —

• Always provide an alternative variation for animations that include translate or scale properties
• A good rule of thumb is to replace the above with an opacity fade, so that elements can still gradually appear, but are less likely to trigger motion sickness

For engineers —

• Remember to use the provided animation variant inside a prefers-reduced-motion: reduce media query
• Test reduced animation variants with the OS reduced motion accessibility setting turned on. Alternatively, under the rendering tab in Chrome devtools you can set Emulate CSS media feature prefers-reduced-motion to reduce.