    




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)

``bash`
$ yarn add simple-reveal
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 (
render={({ ref, cn, style }) => (
I want to put a reveal animation here
)}
// options (optional)
duration={500}
delay={0}
initialTransform="translateY(1rem)"
/>
);
};
`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 (
I want to put a reveal animation here
);
};
``- Tony