Permalink
Browse files

adding support for inline animations

  • Loading branch information...
rnosov committed Sep 28, 2017
1 parent 3fbf536 commit cf52cc4656b4bdb8b8af019f2d3b3cd8d9917974
Showing with 164 additions and 119 deletions.
  1. +122 −87 README.md
  2. +1 −1 __tests__/__snapshots__/Reveal.test.js.snap
  3. +1 −1 package-lock.json
  4. +6 −6 package.json
  5. +34 −24 src/Reveal.js
View
209 README.md
@@ -1,139 +1,174 @@
# React Reveal
Easily add reveal animations to your React apps. [React Reveal](https://www.npmjs.com/package/react-reveal) is compatible with excellent [animate.css](https://daneden.github.io/animate.css/) library and [Create React App](https://github.com/facebookincubator/create-react-app) scaffolding. Following examples assume that you're using animate.css but you can replace it with any other CSS animation effects toolkit.
## Introduction
[React Reveal](https://www.npmjs.com/package/react-reveal) is the easiest way to add reveal on scroll animation to your React app. It's only 1.5kb gzipped and has no external dependencies apart from React, Proptypes and Babel Runtime (it's very likely you already have them). It's specifically written for React in ES6. If you like this project don't forget to star it on Github!
[Live Demo](https://www.solarleague.org/) - scroll down to see the reveal animation.
## tl;dr
## Quick Start
In the command prompt run:
```sh
npm install react-reveal animate.css --save
npm install react-reveal --save
```
Import all necessary modules:
Import [React Reveal](https://www.npmjs.com/package/react-reveal) in to your project:
```javascript
import Reveal from 'react-reveal'; // this package
import 'animate.css/animate.css'; // CSS animation effects library (you can use something else if you wish)
import Reveal from 'react-reveal';
```
Wrap the jsx that you want to be revealed in your `render` method:
Place the following code somewhere in your `render` method:
```javascript
<Reveal effect="animated fadeInUp"> // for a full list of effects visit the animate.css page
<div>Markup that will be revealed on scroll</div>
</Reveal>
```jsx
<Reveal />
```
## Documentation
You should see a lorem ipsum text and a gentle fade in animation that reveals it. It might a bit difficult to see what is actually happening so let's make it a little bit more obvious.
A simple way of using react-reveal is to simply replace a `div` tag in your JSX markup with the `Reveal` class. All props that do not belong to `Reveal` class will be passed down to a `div` tag (including className). For example:
```javascript
<div className="someClass">
<p>Markup that will be revealed on scroll</p>
```jsx
<div>
{Array(100).fill(void 0).map( (val, index) => <Reveal key={index} /> )}
</div>
```
Scroll down to see the reveal effect. It should be a lot clearer by now what is happening. Now, showing lorem ipsum text is not very helpful by itself so lets try to make it a bit more useful.
// Change div to Reveal and add a desired effect.
// All other other props will be passed down
To do this just wrap the jsx that you want to be revealed in the`Reveal` tag:
<Reveal effect="animated fadeInUp" className="someClass">
```jsx
<Reveal>
<p>Markup that will be revealed on scroll</p>
</Reveal>
```
### Properties
You can also multiply it a few times to make the reveal effect more pronounced. `key` prop is needed by the React as the element is being repeated.
- `effect` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** This prop expects a string containing CSS animation effect. You can use any animate.css animations or use any other CSS based animations. Animate.css effects work by adding `animated` base class to the effect class name. **Required**.
- `fraction` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** Maximum fraction of the revealed element height that can remain off screen before reveal animation is triggered. Should be some value between 0 to 1. Adjust it if the reveal animation is being triggered too late or too early. Defaults to `0.85` **Optional**.
- `ssr` **[bool](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Use this option to suppress flickering during server side rendering. Off by default. **Optional**.
- `throttleTimeout` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** Timeout in milliseconds between running reveal event handler. Defaults to `66` **Optional**.
- `onReveal` **[function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function)** Function called once the element is revealed. **Optional**.
```jsx
<div>
{Array(100).fill(void 0).map( (val, index) =>
<Reveal key={index}>
<p>Markup that will be revealed on scroll</p>
</Reveal>
)}
</div>
```
### Children
It does start looking like something you could use, doesn't it?
However, the plain fade in effect might a bit bland. Let's make it something more cool.
Introducing the `effect` property. Hopefully, it should be the only `Reveal` property that you'll have to learn. We'll make text rotate using `rotate(360deg)` transform function.
You must also pass at least one child to this component. **Required**.
```jsx
<Reveal effect={{ transform: "rotate(360deg)" }}>
<p>Markup that will be revealed on scroll</p>
</Reveal>
```
### Unwanted Scrollbars
Or with the repeated list
Some animation effects might create unwanted scrollbars for a short time. If you want to avoid it set `overflow` attribute of a containing div to `hidden`.
```javascript
<div style={{overflow: 'hidden'}}> //containing div
<p>Some other content</p>
<Reveal effect="animated fadeInUp">
```jsx
<div style={{overflow: 'hidden'}}>
{Array(100).fill(void 0).map( (val, index) =>
<Reveal effect={{ transform: "rotate(360deg)" }} key={index} >
<p>Markup that will be revealed on scroll</p>
</Reveal>
)}
</div>
```
You can play with the `360deg` parameter to adjust the rotation angle.
This animation might a bit over the top so here is the list of other transformations loosely based
on [animate.css](https://daneden.github.io/animate.css/) for you to try:
| Description | Example |
| ------------------ | ------------------------------------------------------------------------ |
| Plain Fade | `<Reveal />` |
| Slide in down | `<Reveal effect={{ transform: 'translate3d(0, -100%, 0)' }} />` |
| Slide in down big | `<Reveal effect={{ transform: 'translate3d(0, -2000px, 0)' }} />` |
| Slide in left | `<Reveal effect={{ transform: 'translate3d(-100%, 0, 0)' }} />` |
| Slide in right | `<Reveal effect={{ transform: 'translate3d(100%, 0, 0)' }} />` |
| Slide in right big | `<Reveal effect={{ transform: 'translate3d(2000px, 0, 0)' }} />` |
| Slide in up | `<Reveal effect={{ transform: 'translate3d(0, 100%, 0)' }} />` |
| Slide in up big | `<Reveal effect={{ transform: 'translate3d(0, 2000px, 0)' }} />` |
| Zoom in | `<Reveal effect={{ transform: 'scale3d(.3, .3, .3)' }} />`|
| Zoom in down | `<Reveal effect={{ transform: 'scale3d(.1, .1, .1) translate3d(0, -1000px, 0)' }} />`|
| Flip | `<Reveal effect={{ transform: 'perspective(400px) rotate3d(0, 1, 0, -360deg)' }} />` |
| Flip in Y axis | `<Reveal effect={{ transform: 'perspective(400px) rotate3d(0, 1, 0, 90deg)' }} />` |
| Flip in X axis | `<Reveal effect={{ transform: 'perspective(400px) rotate3d(1, 0, 0, 90deg)' }} />` |
| Rotate | `<Reveal effect={{ transform: 'rotate(360deg)' }} />` |
| Counter rotate | `<Reveal effect={{ transform: 'rotate(-200deg)' }} />` |
| Rotate down left | `<Reveal effect={{ transform: 'rotate3d(0, 0, 1, -45deg)', transformOrigin: 'left bottom' }} />`|
| Rotate down right | `<Reveal effect={{ transform: 'rotate3d(0, 0, 1, 45deg)' transformOrigin: 'right bottom' }} />`|
| Rotate up left | `<Reveal effect={{ transform: 'rotate3d(0, 0, 1, 45deg)', transformOrigin: 'left bottom' }} />`|
| Rotate up right | `<Reveal effect={{ transform: 'rotate3d(0, 0, 1, -90deg)', transformOrigin: 'right bottom' }} />`|
If you found some interesting effect do send them in and I will list it here. Also, If you need any bespoke animations in your React app I'm available for hire. The email to contact is rnosov@gmail.com
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](https://daneden.github.io/animate.css/) try the following code:
```jsx
<Reveal effect="animated fadeInUp">
<p>Markup that will be revealed on scroll</p>
</Reveal>
```
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`.
```jsx
<div style={{overflow: 'hidden'}}>
<Reveal effect={{ transform: 'translate3d(2000px, 0, 0)' }} >
<p>Markup that will be revealed on scroll</p>
</Reveal>
</div>
```
You can also do it through CSS.
### Universal Rendering
You can also do it using CSS.
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.
## Documentation
```javascript
<Reveal ssr effect="animated fadeInUp">
<div>Markup that will be revealed on scroll</div>
</Reveal>
A simple way of using react-reveal is to simply replace a `div` tag in your JSX markup with the `Reveal` class. All props that do not belong to `Reveal` class will be passed down to a `div` tag (including `className` and `style`). For example:
```jsx
<div className="some-class">
<p>Markup that will be revealed on scroll</p>
</div>
```
## Step by Step Instructions
Change `div` to `Reveal` and add a desired effect.
All other other props will be passed down
In order to start from scratch we'll use Facebook React starter kit called [Create React App](https://github.com/facebookincubator/create-react-app). In the command prompt type:
```jsx
<Reveal className="some-class">
<p>Markup that will be revealed on scroll</p>
</Reveal>
```
### Properties
```sh
npm install -g create-react-app
- `effect` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** or **[object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/object)** This prop could be either an object describing a desired reveal effect (refer to the table above) 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**.
- `transition` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** Read about it [here](https://developer.mozilla.org/en-US/docs/Web/CSS/transition). Useful for adjusting animation duration (second value), easing curve (third value) or animation delay (last value) Defaults to `all 1s ease 0s`. **Optional**.
- `fraction` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** 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.20` meaning that at least 20% of the element must be visible before the reveal. **Optional**.
- `ssr` **[bool](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Use this option to suppress flickering during server side rendering. Off by default. **Optional**.
- `throttleTimeout` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** Timeout in milliseconds between running reveal event handler. Defaults to `66` **Optional**.
- `onReveal` **[function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function)** Function called once the element is revealed. **Optional**.
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
### Children
```
You should pass at least one child to this component. If you don't do it then lorem ipsum placeholder text will be generated.
Copy and paste the following code into app.js:
### Universal Rendering
```javascript
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;
```
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.
Then open [http://localhost:3000/](http://localhost:3000/) to see this example.
```jsx
<Reveal ssr>
<div>Markup that will be revealed on scroll</div>
</Reveal>
```
## Forking This Package
@@ -1 +1 @@
exports[`Reveal renders a initial view 1`] = `"<div class=\"123\"><div>Test test</div></div>"`;
exports[`Reveal renders a initial view 1`] = `"<div style=\"opacity: 0;\"><div>Test test</div></div>"`;
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -1,21 +1,21 @@
{
"name": "react-reveal",
"version": "0.2.2",
"version": "0.3.0",
"author": "Roman Nosov <rnosov@gmail.com>",
"description": "Very easy way of adding reveal on scroll animations to your React app",
"license": "MIT",
"keywords": [
"react",
"reveal",
"scroll",
"scrollreveal",
"revealscroll",
"show",
"hide",
"scroll",
"resize",
"wow",
"animation",
"animate",
"animate.css",
"universal",
"ssr"
"animate"
],
"repository": {
"type": "git",
Oops, something went wrong.

0 comments on commit cf52cc4

Please sign in to comment.