A simple util to fade in child elements, in a staggered animation. Available props listed below:

  • delay: Default: 50. Delay between each child's animation in milliseconds.
  • transitionDuration: Default: 400. Duration of each child's animation in milliseconds.
  • transformDistance: Default: 20. Distance to apply the "pull up" animation.
  • className: No default. Adds a className prop to the container div.
  • childClassName: No default. Adds a className prop to each child div, allowing you to style the direct children of the FadeIn component.
  • wrapperTag: Default: "div". Override the HTML element of the wrapping div.
  • childTag: Default: "div". Override the HTML element wrapped around each child element.
  • visible: If not undefined, the visible prop can be used to control when the fade in occurs. If set to false after the fade-in animation completes, the children will fade out one by one.
  • onComplete: specifies a callback to be called when the animation completes.
Parameters:
NameTypeDescription
propsobject

Props for fade in.

Since
  • 1.0.2
Source
Returns:
Type: 
*
Example
import { FadeIn } from '@gravityforms/react-utils';

const Component = ( {
	endpoints,
	i18n,
} ) => {
     return (
			<FadeIn delay={ 200 } transitionDuration={ 800 }>
				<Box customClasses={ [ 'gform-example__heading-container' ] }>
			        CODE
				</Box>
				<Box customClasses={ [ 'gform-example__body-container' ] }>
				    CODE
				</Box>

				<Box customClasses={ [ 'gform-example__license-container' ] }>
					CODE
				</Box>
			</FadeIn>
		);
	};