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
$ 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 (
    <div>
      <h1 ref={ref} className={cn()}>
        Title
      </h1>
      {new Array(100).fill("").map((_, i) => (
        <SimpleReveal
          key={i}
          delay={i * 100}
          render={({ ref, cn }) => (
            <h1 ref={ref} className={cn()}>
              Hello SimpleReveal!
            </h1>
          )}
        />
      ))}
    </div>
  );
}

Preview:

Download Details:

Author: daangn

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/daangn/simple-reveal

License: MIT