Implementing animations

Many of our components come with animations baked in! If you are implementing a custom animation, be sure to utilize the useReducedMotion hook to ensure an accessible experience. This hook will return a boolean for the user's reduced motion setting on their device, which should then be used to show or hide any animations.

Animations can be implemented using CSS via the InlineStyle component. See this file for an example.

Please don’t create new SCSS/CSS files (or add to existing ones). Please don’t attempt to target and modify internals of Gestalt components, as the feature could break without warning in the future. And when possible, please use any relevant design tokens (e.g. color tokens instead of hex values) to ensure that your feature automatically gets any future changes to those token values.

Lottie has been implemented on mobile and web platforms, and is best used for illustration animations. For more details about using Lottie, view our internal documentation.