react-fade-animation

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