Common Effects

Here is the list of different effects reveal effects. Every component can have a number of different attributes (like left or right versions). See examples for details. You can also use the rest of component props.

Fade

Live demo

import Fade from 'react-reveal/Fade';

<Fade>
  <h1>
    Your content goes here
  </h1>
</Fade>

Flip

Live demo

import Flip from 'react-reveal/Flip';

<Flip>
  <h1>
    Your content goes here
  </h1>
</Flip>

Rotate

Live demo

import Rotate from 'react-reveal/Rotate';

<Rotate>
  <h1>
    Your content goes here
  </h1>
</Rotate>

Zoom

Live demo

import Zoom from 'react-reveal/Zoom';

<Zoom>
  <h1>
    Your content goes here
  </h1>
</Zoom>

Bounce

Live demo

import Bounce from 'react-reveal/Bounce';

<Bounce>
  <h1>
    Your content goes here
  </h1>
</Bounce>

Slide

Live demo

import Slide from 'react-reveal/Slide';

<Slide>
  <h1>
    Your content goes here
  </h1>
</Slide>

Roll

Live demo

import Roll from 'react-reveal/Roll';

<Roll>
  <h1>
    Your content goes here
  </h1>
</Roll>

LightSpeed

Live demo

import LightSpeed from 'react-reveal/LightSpeed';

<LightSpeed>
  <h1>
    Your content goes here
  </h1>
</LightSpeed>

Unwanted Scrollbars

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 hidden.

<div style={{overflow: 'hidden'}}>
  <Fade right big>
    <p>Markup that will be revealed on scroll</p>
  </Fade>
</div>

You can also do it using CSS.