How Add Fade Animation In Container Of React Website

To give fade like animation in container of website install bellow plugin.

npm i react-fade-in

Import Fade in your component

import FadeIn from 'react-fade-in/lib/FadeIn';

Add Below code and customize as per requirement

<FadeIn delay={500} >
          <div style={{ height: "100px" }}>Container 1</div>
          <div style={{ height: "100px" }}>Container 2</div>
          <div style={{ height: "100px" }}>Container 3</div>
          <div style={{ height: "100px" }}>Container 4</div>
          <div style={{ height: "100px" }}>Container 5</div>
          <div style={{ height: "100px" }}>Container 6</div>
</FadeIn>

Props:

delay :  Default is 50. Delay between every child’s animation in milliseconds.

transitionDuration :Default is 400. Duration of each child’s animation in millisecond.

className : No default. Add a className prop to the container.

childClassName : No default. Adds a className props to each child div , allowing you to style the direct children of FadeIn component.

wrapperTag :  Default: “div”. Overrides the HTML element of the wrapping div.

childTag : Default: “div”. Overrides the HTML element wrapped around each child element.

visible : If not undefined, the visible props can be used to control when the fade in occurs. If sets to false after the fadIn animation completes, the children will fade out one after one.

onComplete: specifies a callback to be called when the animation completes.