Easily add reveal animation to any React component. It is compatible with the excellent animate.css library but you can use any CSS based animations.
Live Demo - scroll down to see the reveal animation.
In the command prompt run:
npm install react-reveal animate.css --save
Import all necessary modules:
import Reveal from 'react-reveal'; // this package
import 'animate.css/animate.css'; // CSS animation effects library
Wrap the jsx that you want to be revealed in your render method:
<Reveal effect="animated fadeInUp">
<div>Markup that will be revealed on scroll</div>
</Reveal>
effect
string This prop expects a string containing CSS animation effect. You can use any animate.css animations or use any other CSS based animations. If you're using animate.css don't forget to add animated base class. Required.onReveal
function Function called once the element is revealed. Optional.ssr
bool Use this option to suppress flickering during server side rendering. Off by default. Optional.
You must also 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 ssr effect="animated fadeInUp">
<div>Markup that will be revealed on scroll</div>
</Reveal>
In order to start from scratch we'll use Facebook react starter kit called Create React App. In the command prompt type:
npm install -g create-react-app
create-react-app my-app
cd my-app/
npm install react-reveal animate.css --save
subl src/App.js #open with Sublime Text. Or use any other text editor.
npm start
Copy and paste the following code into app.js:
import React, { Component } from 'react';
import Reveal from 'react-reveal';
import logo from './logo.svg';
import './App.css';
import 'animate.css/animate.css'; // CSS animation effects library
class App extends Component {
render() {
return (
<div className="App" style={{overflow: 'hidden'}}>>
<Reveal effect="animated zoomIn" className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</Reveal>
<Reveal effect="animated flipInY">
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</Reveal>
{Array(100).fill(
<Reveal effect="animated fadeInLeft">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum fermentum massa, pharetra consectetur nisi pellentesque non. Quisque convallis sit amet ante a maximus. Fusce aliquam cursus eros, nec rutrum ante commodo non. Ut vitae viverra justo. Nam dignissim mollis aliquam. Cras pellentesque est at eros aliquet, sed vestibulum diam mollis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris posuere mauris nec lectus varius, vitae gravida nunc tempor. Mauris ut viverra dolor. Maecenas at faucibus tellus. Quisque gravida mi eget tortor porta, eu rhoncus dui blandit.
</p>
</Reveal>
)}
</div>
);
}
}
export default App;
Then open http://localhost:3000/ to see this example.
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
Builds the package for production to the dist
folder
Runs tests
Copyright © 2016 Roman Nosov. This source code is licensed under the MIT license.