react-fade-animation/readme.md

Animate elements in react without any external dependece.

# Animate react elements with fade-in effect 👻!

![Example animation](https://lh3.googleusercontent.com/WUlrYgRXy10OcKUm_nUQ5IFnc6X6u_1DZwjy_UPNMABkETS0-fZWz4cvmgjVCwiV62MLVrGSlkcu)

## 👨🏼‍💻 Example code:

    <FadeAnimation from={"right"} selector={".test"} selectAll={true} duration={3} startDistance={70}>
        <div>
            <FadeAnimation from={"bottom"}>
                <div>TEST</div>
                <div>TEST</div>
            </FadeAnimation>
            <div className="test">TEST
                <div>TEST</div>
                <div>TEST</div>
                <div>TEST</div>
                <FadeAnimation from={"left"} duration={3.5} startDistance={200}>
                    <div>FADE ANIMATION</div>
                    <div>FADE ANIMATION</div>
                </FadeAnimation>
            </div>
        </div>
        <FadeAnimation duration={1.5} startDistance={70} from={"top"}>
            <div>TEST</div>
            <div>TEST</div>
        </FadeAnimation>
        <FadeAnimation duration={0.75}>
            <div>TEST</div>
        </FadeAnimation>
        <FadeAnimation duration={1}>
            <div>TEST</div>
        </FadeAnimation>
        <FadeAnimation duration={2}>
            <div>TEST</div>
        </FadeAnimation>
        <FadeAnimation duration={3}>
            <div>TEST</div>
        </FadeAnimation>
    </FadeAnimation>

## 📄 Supported Props

Note: all props are optional

| Name          | Type                                            | Description                           |
| ------------- | ----------------------------------------------- | ------------------------------------- |
| duration      | `number`                                        | Animation duration in seconds         |
| delay         | `number`                                        | Start delay in seconds                |
| selector      | `string`, example: `*` `.class` `#id` `tag`     | Filter wich elements will be affected |
| selectAll     | `boolean`                                       | Affect all child elements             |
| from          | `string`, can be: `bottom` `top` `left` `right` | Animation start position              |
| startDistance | `number`                                        | Animation start distance in pixels    |