Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
By Sarah Gooding - Feb 07, 2025
New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
react-awesome-reveal
Advanced tools
react-awesome-reveal
React components to add reveal animations using Intersection Observer API and CSS Animations.
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 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 |
|---|---|---|---|
chain | 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 milliseconds) – useful for animating list items | true or false | false |
direction | Origin of the animation | "top", "left", "bottom" or "right" | undefined |
delay | Time to wait before the animation starts | number value (milliseconds) | 0 |
duration | The animation duration | number value (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 | 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>
Chaining Multiple Animations
To chain together multiple animations, set the chain prop to true:
<Fade chain>
<p>I enter first...</p>
<p>...then comes my turn...</p>
<p>...and finally you see me!</p>
</Fade>
This is 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>
In the future, chained animations will be handled by a specific API – stay tuned!
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.
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 29,014 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.
Package last updated on 01 Dec 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.
Related posts
Security News
Linux Foundation Warns Open Source Developers: Compliance with Sanctions Is Not Optional
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
By Sarah Gooding - Feb 06, 2025
Security News
Maven Central Adds Sigstore Signature Validation
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.
By Sarah Gooding - Feb 06, 2025