React Reveal is an animation framework for React. It's MIT licensed, has a tiny footprint and written specifically for React in ES6. It can be used to create various cool reveal on scroll animations in your application. If you liked this package, don't forget to star the Github repository.
A number of simple effect examples:
Search Engine Visibility
react-reveal is regularly checked against googlebot in the Google Search Console to make sure that googlebot can see the content in the revealed elements.
For a full documentation please visit online docs.
In the command prompt run:
npm install react-reveal --save
Alternatively you may use
yarn add react-reveal
Import effects from React Reveal to your project. Lets try
Zoom effect first:
Place the following code somewhere in your
<Zoom><p>Markup that will be revealed on scroll</p></Zoom>
You should see zooming animation that reveals text inside the tag. You can change this text to any JSX you want. If you place this code further down the page you'll see that it'd appear as you scroll down.
Revealing React Components
You may just wrap your custom React component with the effect of your choosing like so:
In such case, in the resulting
<CustomComponent /> HTML markup will be wrapped in a
div tag. If you would rather have a different HTML tag then wrap
<CustomComponent /> in a tag of your choosing:
or if you want to customize
<Zoom><div ="some-class"><CustomComponent /></div></Zoom>
If you want to reveal an image you can wrap
img tag with with the desired
<Zoom><img ="300" ="400" ="" /></Zoom>
It would be a very good idea to specify width and height of any image you wish to reveal.
react-reveal will attach a reveal effect to each child it gets. In other words,
<Zoom><div>First Child</div><div>Second Child</div></Zoom>
will be equivalent to:
<Zoom><div>First Child</div></Zoom><Zoom><div>Second Child</div></Zoom>
If you don't want this to happen, you should wrap multiple children in a
<Zoom><div><div>First Child</div><div>Second Child</div></div></Zoom>
Server Side Rendering
react-reveal will not apply reveal effects on the initial load.
Another option is to apply gentle fadeout effect on the initial render. You can force it on all
react-reveal elements by placing the following code somewhere near the entry point of your app:
import config from 'react-reveal/globals';;
Or you you can do it on a per element basis using
One last option is to use
ssrReveal prop. If enabled, this option will suppress both flickering and
Forking This Package
Clone the this repository using the following command:
git clone https://github.com/rnosov/react-reveal.git
In the cloned directory, you can run following commands:
Installs required node modules
npm run build
Builds the package for production to the
Copyright © 2018 Roman Nosov. Project source code is licensed under the MIT license.