Implementing animations Pilot
There are multiple ways to implement animations in product.
Gestalt on Web
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.
CSS and InlineStyle on Web
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.