Specials

Simple effects designed to attract attention. The idea behind these effects is to alert a user that something has changed in the application state ( for example a new message has been received ).

There is a handy prop called spy you can use with these effects. You assign a variable from your component state to this prop and whenever this variable changes a reveal action is performed.

Have a look at the examples to get the idea on how to use them. Please note, that for most effects to work properly they need to be near the centre of their bounding box.

Flash

Live demo

import Flash from 'react-reveal/Flash';

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

HeadShake

Live demo

import HeadShake from 'react-reveal/HeadShake';

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

Jello

Live demo

import Jello from 'react-reveal/Jello';

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

Jump

Live demo

import Jump from 'react-reveal/Jump';

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

Pulse

Live demo

import Pulse from 'react-reveal/Pulse';

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

RubberBand

Live demo

import RubberBand from 'react-reveal/RubberBand';

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

Shake

Live demo

import Shake from 'react-reveal/Shake';

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

Spin

Live demo

import Spin from 'react-reveal/Spin';

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

Swing

Live demo

import Swing from 'react-reveal/Swing';

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

Tada

Live demo

import Tada from 'react-reveal/Tada';

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

Wobble

Live demo

import Wobble from 'react-reveal/Wobble';

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