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

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 /> component 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, style }) => (
          <h1 ref={ref} className={cn("title")} style={style}>
            I want to put a reveal animation here
          </h1>
        )}
        // options (optional)
        duration={500}
        delay={0}
        initialTransform="translateY(1rem)"
      />
    </div>
  );
};

Or you can use animation using useSimpleReveal() hook like this:

import "simple-reveal/index.css";

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

const MyComponent: React.FC = () => {
  const { ref, cn, style } = useSimpleReveal({
    duration: 500,
    delay: 0,
    initialTransform: "translateY(1rem)",
  });

  return (
    <div>
      <h1 ref={ref} className={cn("title")} style={style}>
        I want to put a reveal animation here
      </h1>
    </div>
  );
};

Contributors

• Tony