Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sieuhuflit/react-native-stagger-animation

React native stagger animation effect
https://github.com/sieuhuflit/react-native-stagger-animation

animated animation animations children react react-native stagger staggered staggered-animation staggered-grid-layout staggered-grids staggered-recycler-view staggered-rendering staggering

Last synced: 3 months ago
JSON representation

React native stagger animation effect

Host: GitHub
URL: https://github.com/sieuhuflit/react-native-stagger-animation
Owner: sieuhuflit
License: mit
Created: 2020-05-13T18:23:28.000Z (almost 5 years ago)
Default Branch: master
Last Pushed: 2023-01-06T05:49:48.000Z (about 2 years ago)
Last Synced: 2024-11-12T10:07:53.929Z (3 months ago)
Topics: animated, animation, animations, children, react, react-native, stagger, staggered, staggered-animation, staggered-grid-layout, staggered-grids, staggered-recycler-view, staggered-rendering, staggering
Language: JavaScript
Size: 46.7 MB
Stars: 4
Watchers: 1
Forks: 0
Open Issues: 19
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE

Awesome Lists containing this project

README

        
React Native Stagger Animation


[![Battle Tested ✅](https://img.shields.io/badge/-Battle--Tested%20%E2%9C%85-03666e?style=for-the-badge)](https://github.com/WrathChaos/react-native-button)

[![npm version](https://img.shields.io/npm/v/react-native-stagger-animation.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-stagger-animation)

[![npm](https://img.shields.io/npm/dt/react-native-stagger-animation.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-stagger-animation)

![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge)

[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)



  

  





  React native stagger animation

  _{Use to create stagger animation effect for children view}





## ➤ Installation

Add the dependency:

## ➤ Peer dependencies

- Using `animated-pose`

## ➤ Usage

```jsx

import StaggerAnimation, { Transition } from 'react-native-stagger-animation';

/**

 * Create stagger animation for header group

 */

const AnimatedStaggerHeader = StaggerAnimation.createAnimatedStagger();

const AnimatedViewHeader = StaggerAnimation.createAnimatedView({

  transitionType: 'easeInOut',

  duration: 900,

});

render() {

  // Visible state

  const { isVisible } = this.state;

  return (

    

      {isVisible && (

        

          

            Hi Stephen

            

          

          

            What sport are you going to play today ?

          

        

      )}

    

  )

}

```

Note : The `Transition` is using to pass any props stagger animation

## ➤ Example

- Check the example folder, then type to the terminal

```bash

expo start

```

## ➤ Configuration

| Property              |   Type   |  Default   | Description                             |

| --------------------- | :------: | :--------: | --------------------------------------- |

| createAnimatedStagger | function | () => null | Create the animate stagger wrapper view |

| createAnimatedView    | function |  ()=>null  | Create View animation component         |

| createAnimatedText    | function |  ()=>null  | Create Text animation component         |

### ➤ Props

Transition type

- `spring`,

- `linear`,

- `easeIn`, `easeOut`, `easeInOut`

- `circIn`, `circOut`, `circInOut`

- `backIn`, `backOut`, `backInOut`

- `anticipate`

### Animate Spring configuration

| Property           |  Type   | Default | Description                                   |

| ------------------ | :-----: | :-----: | --------------------------------------------- |

| type               | string  | linear  | Create the animate stagger wrapper view       |

| stiffness?         | number  |   100   | Spring stiffness.                             |

| damping?           | number  |   10    | Strength of opposing force.                   |

| velocity?          | number  |    0    | Initial velocity.                             |

| overshootClamping? | boolean |  false  | Clamps any overshoot beyond the target value. |

| mass?              | number  |    1    | Mass of the moving object.                    |

| useNativeDriver    | boolean |  false  | Use native driver                             |

### Animate other transition type configuration

| Property        |   Type   | Default | Description                                   |

| --------------- | :------: | :-----: | --------------------------------------------- |

| type            |  string  | linear  | Create the animate stagger wrapper view       |

| duration        | function |   300   | Total duration of animation, in milliseconds. |

| useNativeDriver | boolean  |  false  | Use native driver                             |

## ➤ License

MIT