react-reveal-next v1.4.2
React Reveal Next
React Reveal Next 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.
This project has been inspired by React Reveal, which is good and mature but it is no longer maintained and it uses synchronous listeners on scroll and window resize events. Instead, this library asynchronously detects when an observed element enters or exits the viewport, which leads to more fluid interactions.
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-reveal-next --saveor, if you are using Yarn (as I strongly suggest):
yarn add react-reveal-nextYou 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 Reveal Next to your React component, for example the Fade effect:
import { Fade } from 'react-reveal-next';Then place the following code somewhere in your render method:
<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:
direction: can be"top","left","bottom"or"right". If no direction is passed, the animation happens in place (default toundefined)delay: the amount of time to wait before the animation starts. Can be a number (in milliseconds) or one of the following presets:"1s","2s","3s","4s","5s". Default toundefined, meaning that no delay will be presentfraction: number between0and1indicating how much an element should be in viewport before triggering the animation (default to0)speed: affects the animation duration. Can be a number (in milliseconds) or one of the following presets:"slower"(3s),"slow"(2s),"fast"(800ms) or"faster"(500ms). If not specified, the animation lasts 1s.triggerOnce: specifies if the animation should run only once or everytime an element enters/exits/re-enters the viewport (default tofalse)
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.