Simple Scroll Reveal Animation Library For React

A minimal scroll animation library that applies a subtle reveal animation to elements as they’re scrolled into view.

How to use it:

1. Install and import the component.

# Yarn
$ yarn add simple-reveal

$ npm i simple-reveal
import "simple-reveal/index.css";
import { SimpleReveal, useSimpleReveal } from "simple-reveal";

2. This example shows how to animate h1 elements as they appear on the screen.

export default function App() {
  const { ref, cn } = useSimpleReveal();
  return (
      <h1 ref={ref} className={cn()}>
      {new Array(100).fill("").map((_, i) => (
          delay={i * 100}
          render={({ ref, cn }) => (
            <h1 ref={ref} className={cn()}>
              Hello SimpleReveal!


Simple Scroll Reveal Animation Library For React

Download Details:

Author: daangn

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website:

License: MIT

You Might Be Interested In:

Add Comment