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.
Add video explanation. Create an issue


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 specifies the rate of change of a parameter over time. Adding an easing curve makes the animation feel more natural, cohesive, and connected.

$gl-easing-defaulteaseHover animation
$gl-easing-out-cubiccubic-bezier(0.22, 0.61, 0.36, 1)Focus animation
Update the table with other animation types . Create an issue


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.

200msColor changes, keyboard focus
500msAction feedback
600msPosition changes, complex transitions
Update the table with other animation types . Create an issue


Patterns are reusable animations.

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.

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.


Last updated at: