animationDirection

animationDirection lets you specify which direction the animation should run. Defaults to normal.

Loading...

Reference

function App() {
  return (
    <Animated.View
      style={{
        animationName: {
          from: { width: 120 },
          to: { width: 240 },
        },
        animationDuration: '1s',
        animationIterationCount: 'infinite',
        animationDirection: 'alternate',
      }}
    />
  );
}

Type definitions

type CSSAnimationDirection =
  | 'normal'
  | 'reverse'
  | 'alternate'
  | 'alternateReverse';

animationDirection: CSSAnimationDirection | CSSAnimationDirection[];

Values

normal

Runs the animation forwards.

reverse

Runs the animation backwards.

alternate

For each animation iteration, the animation alternates between running forwards and backwards.

alternateReverse

For each animation iteration, the animation alternates between running forwards and backwards but the first iteration runs backwards.

<animation direction[]>

An array of animation direction values. The order in this array corresponds to the array of style properties passed to the animationName.

animationDirection: ['alternate', 'normal', 'reverse'];
animationName: [bounceIn, move, slide];

In the following example, bounceIn keyframe would alternate between running forwards and backwards, move would run forwards, and slide would run in reverse.

Example

Loading...

Platform compatibility

Android	iOS	Web
✅	✅	✅