react-slide-fade-in
Version:
Customizable slide fade-in animation for react
96 lines (80 loc) • 1.89 kB
Markdown
# React Slide Fade In
A container component that will add a slide fade in animation to children elements.
## Installation
`yarn add react-slide-fade-in`
or
`npm install react-slide-fade-in`
## Props
The container component receives the following props:
```typescript
{
// Position to slide in from
from: 'top' | 'bottom' | 'left' | 'right'
// Offset from final position in pixels
positionOffset: number
// Offset for the trigger in pixels
// (to trigger before or after the final position is visible)
triggerOffset: number
// [Optional] Fade animation start delay in milliseconds. Default: 0 ms
delayInMilliseconds?: number
// [Optional] Fade animation duration in milliseconds. Default: 1200 ms
durationInMilliseconds?: number
}
```
## Usage
```typescript
import { FadeIn } from
export const Example: FC = () => (
<div>
<FadeIn
from="bottom"
positionOffset={400}
triggerOffset={200}
delayInMilliseconds={0}
>
Child 1
</FadeIn>
<FadeIn
from="top"
positionOffset={400}
triggerOffset={400}
delayInMilliseconds={200}
>
Child 2
</FadeIn>
<FadeIn
from="left"
positionOffset={400}
triggerOffset={200}
delayInMilliseconds={400}
>
Child 3
</FadeIn>
<FadeIn
from="right"
positionOffset={400}
triggerOffset={200}
delayInMilliseconds={600}
>
Child 4
</FadeIn>
<FadeIn
from="bottom"
positionOffset={0}
triggerOffset={0}
delayInMilliseconds={800}
>
Child 5
</FadeIn>
<FadeIn
from="bottom"
positionOffset={0}
triggerOffset={0}
delayInMilliseconds={1000}
>
Child 6
</FadeIn>
</div>
)
```