react-awesome-reveal
Advanced tools
React components to add reveal animations using Intersection Observer API and CSS Animations.
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.
You can find a demo website here.
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
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>
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 |
duration | The animation duration | "slower" (3s), "slow" (2s), "fast" (800ms), "faster" (500ms) or a number in milliseconds | 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 |
className | Class names to add to the wrapper element (e.g. to specify custom animations) | string value | undefined |
style | Object to add inline styles to the wrapper element | object value | undefined |
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>
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!
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.
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.
FAQs
React components to add reveal animations using the Intersection Observer API and CSS Animations.
The npm package react-awesome-reveal receives a total of 16,078 weekly downloads. As such, react-awesome-reveal popularity was classified as popular.
We found that react-awesome-reveal demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
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.
Research
Security News
Socket researchers uncovered a backdoored typosquat of BoltDB in the Go ecosystem, exploiting Go Module Proxy caching to persist undetected for years.
Security News
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.
Security News
PyPI now allows maintainers to archive projects, improving security and helping users make informed decisions about their dependencies.