https://github.com/akashuba/react-timeline-animation

react-timeline-animation component
https://github.com/akashuba/react-timeline-animation

Last synced: 3 months ago
JSON representation

react-timeline-animation component

• Host: GitHub
• URL: https://github.com/akashuba/react-timeline-animation
• Owner: akashuba
• Created: 2021-09-14T06:49:18.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2022-12-02T15:43:00.000Z (almost 2 years ago)
• Last Synced: 2024-07-10T12:07:00.004Z (4 months ago)
• Language: TypeScript
• Size: 11.1 MB
• Stars: 39
• Watchers: 2
• Forks: 7
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React scroll animation component.

![test parameter](https://github.com/akashuba/react-timeline-animation/actions/workflows/playwright.yml/badge.svg)     

#### Could be used for timeline filling or any animations related to scrolling and crossing the middle of the screen. Just wrap the animated component with TimelineObserver.  





  


## Demo [codesandbox](https://codesandbox.io/s/brave-kepler-fdbzv?file=/src/App.js:0-1097) 🚀

## How to use it

### 1. Installation

```bash

npm install --save react-timeline-animation

```

or

```bash

yarn add react-timeline-animation

```

### 2. Quick start

Important to add a unique id to the observed element (id="timeline100500").

``` javascript

;

```


Component using react "render prop" pattern.

```javascript

 (

    

  )}

/>;

```

```javascript

const Timeline = ({ setObserver, callback }) => {

  const timeline = useRef(null);

  // It Will be fired when the element crossed the middle of the screen. 

  const someCallback = () => {

    callback();

  };

  useEffect(() => {

    if (timeline.current) {

      setObserver(timeline.current, someCallback);

    }

  }, []);

  return 
;

};

```


## Options (props) 🛠

#### `initialColor`: not required. Initial color of observable element.

#### `fillColor`: not required. Color to fill element.

#### `handleObserve`: required. "render prop" to handle observable element.

#### `hasReverse`: not required. Allow to scroll in both directions.

```typescript

interface TimelineObserverProps {

  handleObserve?: (

    observer: (target: Element, callbackFn?: () => void) => void

  ) => JSX.Element;

  initialColor?: string;

  fillColor?: string;

  hasReverse?: boolean;

}

```