Animation

Animate prop

Certain Primer Brand components include animation presets. These components are:

Box, Button, ComparisonTable, FAQ, Heading, Image, Label, Pillar, SectionIntro, Stack, Statistic, Testimonial, Text, Timeline, Animate, River, RiverBreakout

You can use the animate prop available on these components to apply one of the available animation presets directly to the component.

<Image animate="fade-in" />

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'

Animation variants

Supported animations types include:

To use a specific animation variant, simply pass the animate prop with the desired variant. This value can either be a string or and Object. The latter provides more granular control over the animation delay, durations and easing.

Use the example below to try each animation variant.

const App = () => {
  const [animationVariant, setAnimationVariant] = React.useState('fade-in')

  const handleAnimationChange = (event) =>
    setAnimationVariant(event.target.value)

  return (
    <AnimationProvider key={animationVariant}>
      <Stack
        direction="horizontal"
        alignItems="center"
        justifyContent="center"
        style={{height: 200}}
      >
        <Image
          animate={