Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including react-fade-animation with all npm packages installed. Try it out:

require("prop-types/package.json"); // prop-types is a peer dependency. require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var reactFadeAnimation = require("react-fade-animation")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-fade-animation v1.0.5

Animate elements in react without any external dependece.

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

NameTypeDescription
durationnumberAnimation duration in seconds
delaynumberStart delay in seconds
selectorstring, example: * .class #id tagFilter wich elements will be affected
selectAllbooleanAffect all child elements
fromstring, can be: bottom top left rightAnimation start position
startDistancenumberAnimation start distance in pixels

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free