Props

You can pass the following props to the animation components to customize the behavior:

Prop	Description	Values	Default
cascade	If set, each child of a reveal animation automatically get assigned a delay that takes into account their predecessor (child i enters the viewport after i * delay * damping milliseconds) – useful for animating list items.	true or false	false
damping	Factor that affects the delay that each animated component in a cascade animation will be assigned. If damping = 1 then the delay will be equal to the animation duration; if damping < 1 then the delay will be lower than the animation duration; if damping > 1 then the delay will be greater than the animation duration.	number	0.5 (meaning that the delay will be half of the animation duration)
direction	Origin of the animation (where applicable).	Usually "down", "left", "right" or "up", with some exceptions documented in the code	undefined
delay	Time to wait before the animation starts (in milliseconds).	number	0
duration	The animation duration (milliseconds).	number	1000
fraction	How much an element should be in viewport before the animation is triggered.	number between 0 and 1	0
triggerOnce	Specifies if the animation should run only once or everytime an element enters/exits/re-enters the viewport.	true or false	false
className	The class names to add to the container element.	string	undefined
style	The inline styles to add to the container element.	React.CSSProperties	undefined
childClassName	The class names to add to the child element.	string	undefined
childStyle	The inline styles to add to the child element.	React.CSSProperties	undefined
onVisibilityChange	Callback executed when the element enters or leaves the viewport. If more than one element is being animated, this function is called on each element.	(inView: boolean, entry: IntersectionObserverEntry) => void	undefined