React Awesome Reveal exports a number of ready-to-use animated primitives to automagically animate your components.
By default, all animations are triggered when the content they wrap enters the viewport.
The default set of effect is inspired by Animate.css:
Each of them is a named export, so to import the
Slide component you simply write:
All animated primitives support the following props to change the animation physics.
Where applicable, this changes the origin of the animation. It can be
"up", with some exceptions documented in the component API (see the TSDoc comments).
Time to wait before the animation starts (in milliseconds).
The animation duration (in milliseconds).
1000 (one second).
How much an element should be in the viewport before the animation is triggered.
It must be a number between
0 meaning that the animation starts as soon as the component intersects the vieport, and
1 meaning that the animation does not start unless the component is fully contained in the viewport.
Boolean prop that determines if the animation should run only once or everytime an element enters/exits/re-enters the viewport.
Boolean prop to stagger the animation (see Staggered Animations).
It works by assigning a progressive delay to each direct child wrapped by an animated primitive — this is particularly useful for animating list items.
Factor that affects the delay that each animated component in a cascade animation will be assigned.
damping = 1 then the delay will be equal to the animation duration; if
0 < 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.
0.5 (meaning that the delay will be half of the animation duration).
CSS class names and styles to attach to the element that React Awesome Reveal creates to wrap your own components.
CSS class names and styles to attach to the elements that you pass inside any animated primitive.
Callback executed when the element enters or leaves the viewport.
If an animated primitive directly wraps multiple children, this function is called on each of them, and the
entry argument holds the reference to the current element.
To chain together multiple animations, set the
cascade prop to
Play with the
damping prop to alter the delay by which each child will progressively appear:
A particularly cool use case for staggered animations is list animation.
React Awesome Reveal detects if you pass a
ol element and, if
true, it automatically creates a staggered animation for each
To animate a text, simple wrap it in an animated primitive and set the