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

A simple scroll animation library in React
https://github.com/daangn/simple-reveal

animation react scroll

Last synced: 7 days ago
JSON representation

A simple scroll animation library in React

• Host: GitHub
• URL: https://github.com/daangn/simple-reveal
• Owner: daangn
• Created: 2022-05-19T11:43:41.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-02-10T12:41:58.000Z (9 months ago)
• Last Synced: 2024-04-14T03:08:45.289Z (7 months ago)
• Topics: animation, react, scroll
• Language: TypeScript
• Homepage:
• Size: 43.4 MB
• Stars: 24
• Watchers: 17
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# SimpleReveal

![](https://img.shields.io/npm/v/simple-reveal)

![](https://img.shields.io/npm/l/simple-reveal)

![](https://img.shields.io/npm/dt/simple-reveal)

![](https://img.shields.io/github/contributors/daangn/simple-reveal)

![](https://img.shields.io/github/last-commit/daangn/simple-reveal)

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](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/simplereveal-demo-xzmf57?fontsize=14&hidenavigation=1&theme=dark)

## 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 (

    


      
I want to put a reveal animation here

    

  );

};

```


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 (

    


       (

          


            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

      

    

  );

};

```


## Contributors

- [Tony](https://github.com/tonyfromundefined)