New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

react-awesome-reveal

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-awesome-reveal

React components to add reveal animations using Intersection Observer API and CSS Animations.

1.5.3
Source
npm

Version published: 5 years ago

Weekly downloads: 31K; increased by10.66%

Maintainers: 1

Weekly downloads

Created: 5 years ago

Source

React Awesome Reveal

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 provided by Animate.css to benefit from hardware acceleration.

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 (~1kB gzipped)
⚙️ 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

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

You must also include Animated.css in your HTML file:

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

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
`direction`	Origin of the animation	`"top"`, `"left"`, `"bottom"` or `"right"`	`undefined`
`delay`	Milliseconds to wait before the animation starts	`"1s"`, `"2s"`, `"3s"`, `"4s"`, `"5s"` or a `number` in milliseconds	`undefined`
`fraction`	How much an element should be in viewport before the animation is triggered	`number` between `0` and `1`	`0`
`speed`	Affects the animation duration	`"slower"` (3s), `"slow"` (2s), `"fast"` (800ms), `"faster"` (500ms) or a `number` in milliseconds	`1000`
`triggerOnce`	Specifies if the animation should run only once or everytime an element enters/exits/re-enters the viewport	`true` or `false`	`false`
`className`	Class names to add to the wrapper element (e.g. to add custom animations)	`string` value	`undefined`
`style`	Style object to add inline styles to the wrapper element	`object`	`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>

Chaining Multiple Animations

To chain together multiple animations, you can play with the delay prop:

<Fade>
  <p>I enter first...</p>
</Fade>
<Fade delay="1s">
  <p>...then comes my turn...</p>
</Fade>
<Fade delay="2s">
  <p>...and finally you see me!</p>
</Fade>

In the future, chained animations will be handled by a specific API – stay tuned!

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.

Keywords

FAQs

What is react-awesome-reveal?

Is react-awesome-reveal popular?

Is react-awesome-reveal well maintained?

Package last updated on 26 Nov 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install