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

``bash
$ yarn add simple-reveal
`

How to use

If you have a component like this:

`tsx
import React from "react";

const MyComponent: React.FC = () => {
return (



);
};
`

You can add animations using component like this:

`tsx
import "simple-reveal/index.css";

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

const MyComponent: React.FC = () => {
return (



);
};
`

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

`tsx
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 (



);
};
``

Contributors

- Tony