);
}
`

This Component appears in middle of Viewport.

But you can custom Duration, Delay and Wrapper Style.

$3

#### Import Scroll

`jsx
import ScrollAnimate from 'react-scroll-fade-animation';
`

| Prop Name | Required | Default Value | Type | Description |
| :----------: | :------: | :-----------: | :-----: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| path | X | top | string | You can choose 'top','bottom','left','right','top-bounce','bottom-bounce','left-bounce','right-bounce' (low cases). It means appearance direction [example of 'top', it shows 'bottom' 👉 'top'] |
| delay | X | 0 | number | Milliseconds |
| duration | X | 1200 | number | Milliseconds |
| offsetHeight | X | 0 | number | You can adjust the scroll height at which items are displayed. Both negative and positive numbers are possible. If the set value is negative, it is displayed faster, and if it is positive, it is displayed later. |
| reAnimate | X | false | boolean | If the setting value is true, the item disappears if it moves back to the top of the view. If you scroll down the screen again, the animation that shows the item works again. Default(false) is not showing animation again. |

#### Import Observe

`jsx
import ScrollAnimate from 'react-scroll-fade-animation/observe';
`

| Prop Name | Required | Default Value | Type | Description |
| :-------: | :------: | :------------------: | :----------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| delay | X | 0 | number | Milliseconds |
| duration | X | 1200 | number | Milliseconds |
| offset | X | { x: 0, y: 0, z: 0 } | Object | You can adjust the transition position at which items are displayed. |
| reAnimate | X | false | boolean | If the setting value is true, the item disappears if it moves back to the top of the view. If you scroll down the screen again, the animation that shows the item works again. Default(false) is not showing animation again. |
| threshold | X | 0.7 | number or number[] | It refers to the percentage of the item appearing in the viewport. 0.7 means that 70% of the items wrapped in scroll component are displayed in the viewport. |

🍔 Example

`jsx
import React from 'react';
import ScrollAnimationItem from 'react-scroll-fade-animation';

const ScrollItem = ({ title }) => (
path={'left'}
delay={100}
duration={1500}
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
{title}

);

export const ScrollWrapper = ({ itemList }) => (
<>
{itemList.map(item => (

))}

);
`

more Examples are in DEMO

🧑🏻‍💻 Contribute

If you have a nice idea or something to modify codes or bugs, you can make Issue or Pull Request` everytime!