SimpleReveal

A simple scroll animation library in React

  • Zero-dependency
  • No additional DOM element
  • Simple and predictable API
  • SSR Support (Next.js, Gatsby)
  • Automatically compensates transition delay
    • The delay only works when it is first revealed, and disables the delay when it is revealed when scrolling.
  • TypeScript Support
  • Respect @media (prefers-reduced-motion)

Demo

Edit SimpleReveal Demo

Getting started

$ yarn add simple-reveal

How to use

If you have a component like this:

import React from "react";

const MyComponent: React.FC = () => {
  return (
    <div>
      <h1 className="title">I want to put a reveal animation here</h1>
    </div>
  );
};

You can add animations using <SimpleReveal /> like this:

import "simple-reveal/index.css";

import React from "react";
import { SimpleReveal } from "simple-reveal";

const MyComponent: React.FC = () => {
  return (
    <div>
      <SimpleReveal
        render={({ ref, cn }) => (
          <h1 ref={ref} className={cn("title")}>
            I want to put a reveal animation here
          </h1>
        )}
        // options (optional)
        duration={500}
        delay={0}
        initialTransform="translateY(1rem)"
      />
    </div>
  );
};

Contributors

GitHub

View Github