React scroll animation component.

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

How to use it

$3

``bash npm install --save react-timeline-animation`

or

`bash yarn add react-timeline-animation`

`$3`


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

 javascript


Component using react "render prop" pattern.

`javascript initialColor="#e5e5e5" fillColor="#53b374" handleObserve={(setObserver) => ( callback={onCallback} className="timeline" setObserver={setObserver} /> )} />;`

`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; }``