Create Smooth Sequenced Animations with react-native-stagger

The react-native-stagger component makes it easy to orchestrate smooth staggered animations in React Native.

Powered by Reanimated, it enables native-performance animations at 60-120 FPS across iOS, Android, and Web.

The stagger component allows you to animate the entering and exiting of React Native views and components with full control over duration, delay, direction and animation curves. It’s perfect for onboarding flows, dynamic galleries, carousels, and any place you need sequenced animation.

How to use it:

1. Install the required react-native-reanimated components and then import ‘stagger’ into your React Native application:

npm install @animatereactnative/stagger

import { Stagger } from '@animatereactnative/stagger';

2. A simple example showcasing how ‘stagger’ works:

export function Example() {
  return (
    <Stagger
      stagger={50}
      duration={300}
      exitDirection={-1}
      entering={() => ZoomInEasyDown.springify()}
      exiting={() => FadeOutDown.springify()}
      style={{
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'center',
        gap: 12,
      }}
    >
      Any content here ...
    </Stagger>
  );
}

3. Available component props.

// any component that you'd like to apply
children,

// duration between elements
stagger = 50,

// 1: top to bottom
// -1: bottom to top
enterDirection = 1,
exitDirection = -1,

// duration
duration = 400,

// view styles
style,

// enter/exit functions
entering = () => FadeInDown.duration(400),
exiting = () => FadeOutDown.duration(400),

// initial delay
initialEnteringDelay = 0,
initialExitingDelay = 0,

Preview:

 

Download Details:

Author: animate-react-native

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/animate-react-native/stagger

License: MIT