Animation fundamentals

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

Types of animation

1. Feedback: Confirm a user interaction with a control or other interactive element.
2. Focus: Highlight important content outside of a user's current context.
3. Explanation: Show a user an element's properties, and its relationship to other elements.
4. Engagement: Help a user feel supported while waiting.
5. Emotional: Build emotional bonds with a user and express the brand — it can make a user feel welcome and supported.

TODO:

Add video explanation. Create an issue

Principles

Use animation deliberately to enhance the experience without dominating it. Animation should not be added without a good reason. Too much animation can distract a user and disrupt their task.

• Be realistic. An animation should feel natural and mirror traits from the real world, such as acceleration, gravity, and volume.
• Be purposeful. An animation should assist and support the user experience without distracting from it.
• Be optional and accessible. An animation should respect the user's motion preferences by using the prefers-reduced-motion CSS media query.

Easing

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

Example	Variable	Value	Use
	$gl-easing-linear	linear
	$gl-easing-default	ease	Hover animation
	$gl-easing-out-cubic	cubic-bezier(0.22, 0.61, 0.36, 1)	Focus animation

TODO:

Update the table with other animation types . Create an issue

Duration

The duration is the time an animation takes from start to finish. The animated element's scale, easing, and complexity should influence the total duration. This means that the greater the distance traveled and the more complex the animated object, the longer the animation duration should be.

Value	Use
200ms	Color changes, keyboard focus
500ms	Action feedback
600ms	Position changes, complex transitions

TODO:

Update the table with other animation types . Create an issue

Patterns

Patterns are reusable animations.

TODO:

Add details of bounce and other effects. Create an issue

Page auto-scroll

An auto-scroll transition can be used to bring a content block into view while sticky or fixed elements remain in place. For example, a link in a header can smoothly scroll a section of the page into view that was previously outside of the browser's viewport. Likewise, when a user navigates to a section of a page from an external link, the page can smoothly scroll to that section after it loads.

TODO:

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

Skeleton loading

A skeleton loader uses a horizontally pulsing animation with a linear 1s timing. Learn more about skeleton loaders.

Resources

• The Role of Animation and Motion in UX - Nielsen Norman Group
• Using the CSS reduce-motion query to prevent motion - WCAG
• Ten tips for better CSS transitions and animations - Josh Collinsworth