Skip to main content

Props

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

PropDescriptionValuesDefault
cascadeIf 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 falsefalse
dampingFactor 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.number0.5 (meaning that the delay will be half of the animation duration)
directionOrigin of the animation (where applicable).Usually "down", "left", "right" or "up", with some exceptions documented in the codeundefined
delayTime to wait before the animation starts (in milliseconds).number0
durationThe animation duration (milliseconds).number1000
fractionHow much an element should be in viewport before the animation is triggered.number between 0 and 10
triggerOnceSpecifies if the animation should run only once or everytime an element enters/exits/re-enters the viewport.true or falsefalse
classNameThe class names to add to the container element.stringundefined
styleThe inline styles to add to the container element.React.CSSPropertiesundefined
childClassNameThe class names to add to the child element.stringundefined
childStyleThe inline styles to add to the child element.React.CSSPropertiesundefined
onVisibilityChangeCallback 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) => voidundefined