rr

react-reveal

Easily add reveal on scroll animations to your React app

Showing:

Popularity

Downloads/wk

58.9K

GitHub Stars

2.2K

Maintenance

Last Commit

3yrs ago

Contributors

2

Package

Dependencies

1

Size (min+gzip)

8.4KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Reviews

Average Rating

4.0/55
Read All Reviews
spawoz-work
alimoosavi15

Top Feedback

1Easy to Use

Readme

React Reveal

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.

Live Examples

A number of simple effect examples:

Also, there are more complicated examples of animated form errors and a todo app.

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.

Full Documentation

For a full documentation please visit online docs.

Installation

In the command prompt run:

npm install react-reveal --save

Alternatively you may use yarn:

yarn add react-reveal

Quick Start

Import effects from React Reveal to your project. Lets try Zoom effect first:

import Zoom from 'react-reveal/Zoom';

Place the following code somewhere in your render method:

<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:

<Zoom>  
  <CustomComponent />
</Zoom>

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:

<Zoom>
  <section>
    <CustomComponent />   
  </section>
</Zoom>

or if you want to customize div props:

<Zoom>
  <div className="some-class">
    <CustomComponent />   
  </div>
</Zoom>

Revealing Images

If you want to reveal an image you can wrap img tag with with the desired react-reveal effect:

<Zoom>
  <img height="300" width="400" src="https://source.unsplash.com/random/300x400" />
</Zoom>

It would be a very good idea to specify width and height of any image you wish to reveal.

Children

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 div tag:

<Zoom>
  <div>
    <div>First Child</div>
    <div>Second Child</div>
  </div>
</Zoom>

Server Side Rendering

react-reveal supports server side rendering out of the box. In some cases, when the javascript bundle arrives much later than the HTML&CSS it might cause a flickering. To prevent this 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';

config({ ssrFadeout: true });

Or you you can do it on a per element basis using ssrFadeout prop:

<Zoom ssrFadeout><h1>Content</h1></Zoom>

One last option is to use ssrReveal prop. If enabled, this option will suppress both flickering and ssrFadeout effect. The unfortunate drawback of this option is that the revealed content will appear hidden to Googlebot and to anyone with javascript switched off. So it will makes sense for images and/or headings which are duplicated elsewhere on the page.

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:

npm install

Installs required node modules

npm run build

Builds the package for production to the dist folder

npm test

Runs tests

License

Copyright © 2018 Roman Nosov. Project source code is licensed under the MIT license.

Rate & Review

Great Documentation0
Easy to Use1
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
Akshay Kadambattu74 Ratings171 Reviews
9 months ago

Hands off to the light weight library. I've used scroll reveal for complex animations but this do the job better, View-port calculation seems a bit off at times, but it all comes down to the responsiveness of the website.


0
Ali M.Santa Clara, CA6 Ratings1 Review
1 year ago

Does the job but it needs updating. The package hasn't been updated and some edge cases are not functioning correctly.


0
Mutlu Can ATESAnkara,Turkey18 Ratings0 Reviews
Junior Front End Developer @jotform
9 months ago
Daniel Pescador12 Ratings0 Reviews
September 23, 2020
Easy to Use
Jack4 Ratings0 Reviews
Javascript Dev. #Coder #Baller #Gamer #Christian #Snowboarder #Drummer
September 24, 2020

Tutorials

No tutorials found
Add a tutorial