React Reveal is a dead simple way to add some cool reveal on scroll animations to your React app. It's less than 2kb gzipped and written for React from scratch in ES6. If you like this package don't forget to star the Github project!
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.
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.
It might a bit difficult to see what is actually happening so let's make the effect a little bit more pronounced. Note that the
key prop is needed by React as the element is being repeated.
Scroll down to see the reveal effect. It should be a lot clearer by now what is happening.
Here is the handy list of different effects for you to try. Some effects have attributes to them (like left or right versions). They can can be combined with other Reveal props (see docs further down).
<Fade>Your content goes here</Fade><Fade >Your content goes here</Fade><Fade >Your content goes here</Fade><Fade >Your content goes here</Fade><Fade >Your content goes here</Fade><Fade >Your content goes here</Fade><Fade >Your content goes here</Fade><Fade >Your content goes here</Fade><Fade >Your content goes here</Fade><Flip>Your content goes here</Flip><Flip >Your content goes here</Flip><Flip >Your content goes here</Flip><Rotate>Your content goes here</Rotate><Rotate >Your content goes here</Rotate><Rotate >Your content goes here</Rotate><Rotate >Your content goes here</Rotate><Rotate >Your content goes here</Rotate><Zoom>Your content goes here</Zoom>
If you need any more bespoke animations in your React app then this the author of this package is available for hire. The email to contact is firstname.lastname@example.org
One cool feature of
react-reveal is the ability to easily create wavelike reveal effects. It can be handy if you want animate some boring looking lists. Say you have list like this:
<ul ="some-class"><li>First Item</li><li>Another Item</li><li>Last Item</li></ul>
You can liven it up a bit by using
wave prop ( even without breaking you markup ):
<Fade ="ul" ="some-class"><li>First Item</li><li>Another Item</li><li>Last Item</li></Fade>
If several of Reveal effects are likely to happen simultaneously you might want for them to happen sequentially. In such case, you should use
delay prop. You can also adjust a duration of effect animation by using
duration prop. Both
duration are specified in a number of milliseconds.
<Zoom = =><p>Markup that will be revealed first</p></Zoom><Zoom =><p>Markup that will be revealed a bit later</p></Zoom>
react-reveal can be used to generate events for web analytics tools (like Google analytics) in order to get fine grained reports. For example, you can log exactly whether a particular markup was seen by user:
<Fade =><p>Markup that will be revealed</p></Fade>
Please note that some reveal effects might create unwanted scrollbars for a short time.
If you want to avoid it set
overflow attribute of a containing div to
<div =><Fade ><p>Markup that will be revealed on scroll</p></Fade></div>
You can also do it using CSS.
By now you should be able to use this package without any problem. If you want to know how things work in detail then keep reading.
To implement custom reveal effects we'll need the
Reveal base component and its
effect property. First, in order to use it we need to import it:
Lets try to implement custom rotation. We'll do this by using
rotate(360deg) transform function:
<Reveal =><p>Markup that will be revealed on scroll</p></Reveal>
Or with the repeated list:
You can play with the
360deg parameter to adjust the rotation angle.
To learn more about transform functions go to its MDN page.
If you already have animations effects in your CSS then just set effect property to its class name. For example, if you're using Animate.css try the following code:
<Reveal ="animated fadeInUp"><p>Markup that will be revealed on scroll</p></Reveal>
effectstring or object This prop could be either an object describing a desired reveal effect or a string containing CSS animation class (for example "animated fadeInUp" from animate.css). If you don't specify it a default fade in effect will apply. Optional.
durationnumber Duration of the reveal animation in milliseconds. Ignored for effects based on CSS animation classes. Defaults to
delaynumber Delay before the start of reveal animation in milliseconds. Can be handy if several reveals are happening at approximately same time and you want to space them out a bit. Defaults to
66seconds ( small delay is used to throttle reveal events). Anything higher than that should be generally okay. Optional.
wavebool or number Can be used to create wave like animation effects. Makes sense if you're trying to Reveal a some kind of list and don't want reveal all items at once. If you set it to a number then this number will be a delay in milliseconds between each reveal. If you set to true then the delay will
200milliseconds. Off by default. Optional.
tagstring HTML tag which is used for Reveal container. Defaults to
classNamestring CSS class name. Optional.
styleobject Style Object. Optional.
fractionnumber Fraction of the revealed element height that must be visible in order for reveal animation to trigger. Should be some value between 0 to 1. Defaults to
0.2meaning that at least 20% of the element height must be visible before the reveal. For elements taller than a viewport, height is limited to the height of a viewport. Optional.
ssrbool Use this option to suppress flickering during server side rendering. Off by default. Optional.
easingstring Easing function. Read more about here. Defaults to
preventRevealbool If true then reveal will be suppressed even if element is in view. It is useful for building animation sequences. Off by default. Optional.
onRevealfunction Function called once the element is revealed. Optional.
These props will work with both
<Reveal /> component and effect aliases (
<Rotate />, etc ) as well.
You should pass at least one child to this component. Required.
This component is compatible with universal or server side rendering (SSR). You might want to enable ssr flag if you have any issues with flickering on page startup.
<Reveal ><div>Markup that will be revealed on scroll</div></Reveal>
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 © 2017 Roman Nosov. Project source code is licensed under the MIT license.