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 |