Meet npm Pro: unlimited public & private packages + package-based permissions.Learn more »

react-fade-animation

1.0.5 • Public • Published

Animate react elements with fade-in effect 👻!

Example animation

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

Install

npm i react-fade-animation

DownloadsWeekly Downloads

6

Version

1.0.5

License

MIT

Unpacked Size

19.7 kB

Total Files

4

Last publish

Collaborators

  • avatar