With the react-awesome-reveal library, we can render animations in our React app easily.
In this article, we’ll take a look at how to get started with the react-awesome-reveal.
Installation
We can install the library by running:
npm install react-awesome-reveal --save
with NPM or we can run:
yarn add react-awesome-reveal
with Yarn.
Quick Start
We can add a simple fade effect to our content with the Fade component.
For example, we can write:
import React from "react";
import { Fade } from "react-awesome-reveal";
export default function App() {
return (
<div className="App">
<Fade>
<p>hello world</p>
</Fade>
</div>
);
}
to display ‘hello world’ with a fade effect as it enters.
Other supported effects include Bounce, Fade, Flip, Hinge, JackInTheBox, Roll, Rotate, Slide and Zoom .
We can add the triggerOnce prop to animate only the first time an element enters the viewport:
import React from "react";
import { Fade } from "react-awesome-reveal";
export default function App() {
return (
<div className="App">
<Fade triggerOnce>
<p>hello world</p>
</Fade>
</div>
);
}
Chaining Multiple Animations
We can chain multiple animations with the cascade prop:
import React from "react";
import { Fade } from "react-awesome-reveal";
export default function App() {
return (
<div className="App">
<Fade cascade>
<p>foo</p>
<p>bar</p>
<p>baz</p>
</Fade>
</div>
);
}
Then each of the p elements will be animated one after the other.
This is similar to:
import React from "react";
import { Fade } from "react-awesome-reveal";
export default function App() {
return (
<div className="App">
<Fade>
<p>foo</p>
</Fade>
<Fade delay={1000}>
<p>bar</p>
</Fade>
<Fade delay={2000}>
<p>baz</p>
</Fade>
</div>
);
}
except that cascade shows the 2nd item only after the first enter the viewport.
Custom Animations
We can create custom animations with the keyframes tag.
For example, we can write:
import React from "react";
import Reveal from "react-awesome-reveal";
import { keyframes } from "[@emotion/core](https://medium.com/r/?url=http%3A%2F%2Ftwitter.com%2Femotion%2Fcore "Twitter profile for @emotion/core")";
const customAnimation = keyframes`
from {
opacity: 0;
transform: translate3d(200px, 100px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
`;
function AnimatedComponent({ children }) {
return <Reveal keyframes={customAnimation}>{children}</Reveal>;
}
export default function App() {
return (
<div className="App">
<AnimatedComponent>
<p>hello world</p>
</AnimatedComponent>
</div>
);
}
to create the customAnimation object with the keyframes tag.
We specify the from styles that are rendered at the start of the animation.
The to styles are rendered at the end of the animation.
The styles in between are interpolated.
Then we can use that with the Reveal component’s keyframes prop.
And we use our AnimatedComponent in the App component.
If no keyframes prop is passed in, the default rendered animation is fade entrance from the left.
Other props we can pass to Reveal include:
cascadedampingdelaydurationfractiontriggerOnceclassNameandchildClassNamestyleandchildStyle
Conclusion
We can add simple animation with the react-awesome-real library.
