Animation

Animate component

You can alternatively compose animations into your React application using the Animate wrapper component. This can be useful in situations where you need to animate native HTML elements, or components that don’t support the animate prop.

import {Animate} from '@primer/react-brand'

<AnimationProvider>
  <Animate animate="fade-in">
    <Text>This text will fade-in</Text>
  </Animate>
</AnimationProvider>

AnimationProvider

An AnimationProvider is first required to enable animations on the page. This component should wrap specific parts of your application code, or the entire app. The AnimationProvider assumes responsibility for triggering animations and automatically applying effects such as staggering.

By default, the AnimationProvider will stagger animations in order of DOM appearance. This behavior can be turned off by setting autoStaggerChildren to false.

The increment delta can also be increased or decreased using staggerDelayIncrement, which is set to 100ms by default.

import {AnimationProvider} from '@primer/react-brand'

Examples

Animations should be used sparingly. The examples below demonstrate some valid use-cases.

River

Apply animation to River.Content instead of the entire element.

Cards and staggering

AnimationProvider automatically applies a delay increment to all children that have animation presets defined. Extend the duration of each delay using staggerDelayIncrement.

Alternatively, use delay to stagger animations on adjacent elements if this feature is toggled off.

See Storybook for more examples of animation.

Props

AnimationProvider Required