reveal-on-scroll-react

React Scroll Reveal

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!

Installation

npm i --save reveal-on-scroll-react

Getting Started

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"

Properties

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