Animate react elements with fade-in effect 👻!

👨🏼‍💻 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 |