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.
The longer distance an object travels, the longer the timing is for the animation. Avoid large, full screen animations.
Subtle animations, or objects leaving the screen should take 100 milliseconds. Objects entering the screen, or motion we want to use to direct user attention take between 200 milliseconds. Avoid animations longer animations as they will make the experience appear sluggish. If a specific animation feels like it will need more than 400 milliseconds, revisit the animation to see if there is a simpler, easier, shorter transition to implement.
Easing specifies the rate of change of a parameter over time. Adding an easing curve makes the motion feel more natural, cohesive, and connected.
Todo: Define easing standards
Types of animations
Interactive elements (links, buttons, etc.) should have a hover state. A subtle animation for this transition adds a polished feel. We use 100 milliseconds linear transition for a color hover effect.
Todo: Add hover example
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 200 milliseconds linear fade in.
Todo: Add quick update example
Skeleton loaders includes a horizontally pulsating animation that shows motion as if it's growing. It's timing is a slower linear 1s. Learn more about skeleton loaders.
Todo: Add skeleton loader transition example
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.
An example of a moving transition is when elements have to rearrange when you drag an element.
Todo: Add drag animation example
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 screen.
Todo: Add auto scroll example (issue board cards)