Motion is a tool to help convey important relationships, changes, or transitions between elements. It is used sparingly and intentionally, highlighting the right elements at the right moment.


Easing specifies the rate of change of a parameter over time. Adding an easing curve makes the motion feel more natural, cohesive, and connected.

Define easing standards Create an issue


The scale of an animation, its easing curve, and the complexity of the element which is being animated should influence the total animation duration. This means the further the traveled distance and the more complex the animated object, the longer the timing for the animation should be.

Macro animations

Macro animations cover larger scale objects or surface areas such as page changes, drawer reveals, and scrolling or other movements across the screen, and so on. We should be mindful of larger-scale animations and make sure they convey enough meaning to add value to the user experience. These animations may take up to 400ms.

Micro animations

Micro animations cover smaller-scale objects or surface areas such as icons, color changes, buttons interactions, tooltips, and so on. They are used to direct user attention and add a small amount of meaning which can help the user. We should be mindful of smaller scale animations and make sure they don't take too long as they will make the experience appear sluggish. If the complexity of an object requires a longer animation time please revisit it and look for an alternative solution. These animations may take up between 100ms and 200ms.

Types of animations


Interactive elements (links, buttons, and so on) should have a hover state. A subtle animation for this transition adds a polished feel. We use a 100ms linear transition for a color hover effect.

Add hover example Create an issue

Quick update

When information is updating in place, a quick, subtle animation is needed. The previous content should cut out, and the new content should have a 200ms linear fade in.

Add quick update example Create an issue

Skeleton loading

Skeleton loaders use a horizontally pulsing animation with a linear 1s timing. Learn more about skeleton loaders.

Add skeleton loader transition example Create an issue

Moving transitions

When elements move on-screen, there should be a quick animation so it is clear to users what moved where. These types of animations use a 200 milliseconds transition time.

Add modal appearance example Create an issue

Shifting elements

An example of a moving transition is when elements have to rearrange when you drag an element.

Add drag animation example Create an issue

Page auto-scroll

To keep an active element visible, a page auto-scroll transition can be used. An example of this includes clicking an issue board card that is out of the screen.

Add auto-scroll example (issue board cards) Create an issue


Last updated at: