Add scroll animations to your React application super fast!
This library is based on framer-motion and react-intersection-observer. Many thanks to their contributions!
npm i --save reveal-on-scroll-react
IDEA: Simply replace the scroll reveal components with your existing HTML tags.
But first you need to import the library:
import { ScrollReveal } from "reveal-on-scroll-react";
Now you can start replacing your tags. Let's consider the following example:
function HelloWorld() {
return (
<div className="center">
<h1 className="color-blue">Hello World</h1>
</div>
)
}
This allows us to add a fade in and slide animation like so:
function HelloWorld() {
return (
<ScrollReveal.div className="center">
<ScrollReveal.h1 animation="slide-in-bottom" className="color-blue">Hello World</ScrollReveal.h1>
</ScrollReveal.div>
)
}
Notice: If no animation has been specified, the default animation is "fade-in" meaning the animation property is not required.
Currently there are 4 different types of animations "fade-in" | "slide-in-bottom" | "slide-in-right" | "slide-in-left"
Property | Default Value | Description |
---|---|---|
animation | "fade-in" | The animation preset |
threshold | 0.5 | Configure the viewport threshold 0 - 1 |
duration | 1 | Duration of the animation in seconds |
easing | "easeOut" | Easing function |
delay | 0 | Delay the animation |
value | - | Offset before the animation has started |