Skip to content
React components to add reveal animations using Intersection Observer API and CSS Animations.
TypeScript HTML JavaScript
Branch: master
Clone or download
1
Latest commit eadd0a8 Feb 8, 2020
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs Updated react-awesome-reveal to latest stable version in docs website Jan 18, 2020
example Added reverse prop Jan 18, 2020
src Fixes #21 Feb 8, 2020
types Animate.css is not required anymore as external dependency Nov 30, 2019
.gitignore First commit Nov 24, 2019
LICENSE
README.md Added documentation for Generic Animations Jan 26, 2020
now.json Removed google-analytics in favor of google-tagmanager Nov 28, 2019
package.json v2.4.2 Feb 8, 2020
tsconfig.json First commit Nov 24, 2019
tsdx.config.js Animate.css is not required anymore as external dependency Nov 30, 2019
yarn.lock Added reverse prop Jan 18, 2020

README.md

React Awesome Reveal

Version Last Commit Downloads Size License

React Awesome Reveal is a library for React apps written in TypeScript that adds reveal animations using the Intersection Observer API to detect when the elements appear in the viewport. Animations are internally provided by Animate.css to benefit from hardware acceleration.

Table Of Contents

Features

  • 🎁 Modern stack - It is built for modern React
  • 🏷 TypeScript support - It is written in TypeScript to make it easier and faster to use the library
  • 🍃 Lightweight - Very little footprint on your project and no other dependencies required
  • ⚙️ Uses native APIs - Intersection Observer and CSS Animations are now supported by all major browsers
  • 🚀 Fast - Buttery smooth experience thanks to the use of native asynchronous APIs and hardware acceleration
  • 🌳 Tree-shakeable - Only the parts you use will be included in your final bundle

Demo

You can find a demo website here.

Installation

To add this package as a dependency to your app, simply run

npm install react-awesome-reveal --save

or, if you are using Yarn (as I strongly suggest):

yarn add react-awesome-reveal

Quick Start

Import effects from React Awesome Reveal to your React component, for example the Fade effect:

import { Fade } from 'react-awesome-reveal';

Then simply wrap the components you want to animate:

<Fade>
  <p>I will gently appear as I enter the viewport</p>
</Fade>

Supported Effects

The effects currently supported are Bounce, Fade, Flash, Flip, HeadShake, HeartBeat, JackInTheBox, Jello, LightSpeed, Pulse, Rotate, RubberBand, Shake, Slide, Swing, Tada, Wobble and Zoom.

You can pass the following properties to the animation components to customize the behavior:

Prop Description Values Default
cascade If set, each child of a reveal animation automatically get assigned a delay that takes into account their predecessor (child i enters the viewport after i * delay * damping milliseconds) – useful for animating list items. true or false false
damping Factor that affects the delay that each animated component in a cascade animation will be assigned. If damping = 1 then the delay will be equal to the animation duration; if damping < 1 then the delay will be lower than the animation duration; if damping > 1 then the delay will be greater than the animation duration. number value 0.5 (meaning that the delay will be half of the animation duration)
direction Origin of the animation (where applicable). Usually "top", "left", "bottom" or "right", with some exceptions documented in the code undefined
delay Time to wait before the animation starts (in milliseconds). number value 0
duration The animation duration (milliseconds). number value 1000
fraction How much an element should be in viewport before the animation is triggered. number between 0 and 1 0
triggerOnce Specifies if the animation should run only once or everytime an element enters/exits/re-enters the viewport. true or false false
reverse Specifies if the animation should make the element(s) disappear. Set this to a state variable of your component to make the animation dynamic! true or false false
className Class names to add to the wrapper element. string value undefined
style Object to add inline styles to the wrapper element. object value undefined

Example

To trigger the animation only the first time an element enters the viewport:

<Slide triggerOnce>
  <p>I will animate only the first time you see me</p>
</Slide>

Generic Animations

Starting from version 2.4.1, you can use the default export to specify arbitrary animations through the animation prop:

import Reveal from 'react-awesome-reveal';

const MyComponent = () => {
  return <Reveal animation="fade">{/* Content here */}</Reveal>;
};

Note that the possible values for the animation prop are automatically suggested by your IDE if it supports TypeScript.

Of course, you can pass to it all the props described in the Supported Effects section.

Chaining Multiple Animations

To chain together multiple animations, set the cascade prop to true:

<Fade cascade>
  <p>I enter first...</p>
  <p>...then comes my turn...</p>
  <p>...and finally you see me!</p>
</Fade>

This is almost equivalent to

<Fade>
  <p>I enter first...</p>
</Fade>
<Fade delay={1000}>
  <p>...then comes my turn...</p>
</Fade>
<Fade delay={2000}>
  <p>...and finally you see me!</p>
</Fade>

with the exception that, since each Fade component creates an isolated visibility context, in the second snippet every p will be shown only if they are inside the viewport (after the specified delay).

Past Releases

Version 1.x

Version 1.x required to manually include Animate.css in your HTML file(s):

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"
  />
</head>

Moreover, the duration property was called speed.

License

Project source code is licensed under the MIT license. You are free to fork this repository, edit the code, share and use it both for non-commercial and commercial purposes.

You can’t perform that action at this time.