react-timeline-animation
TypeScript icon, indicating that this package has built-in type declarations

1.2.3 • Public • Published

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.

drawing

Demo codesandbox 🚀

How to use it

1. Installation

npm install --save react-timeline-animation

or

yarn add react-timeline-animation

2. Quick start

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

<div id="timeline100500" ref={timeline} className="timeline" />;

Component using react "render prop" pattern.

<TimelineObserver
  initialColor="#e5e5e5"
  fillColor="#53b374"
  handleObserve={(setObserver) => (
    <Timeline
      callback={onCallback}
      className="timeline"
      setObserver={setObserver}
    />
  )}
/>;
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 <div id="timeline100500" ref={timeline} className="timeline" />;
};

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.

interface TimelineObserverProps {
  handleObserve?: (
    observer: (target: Element, callbackFn?: () => void) => void
  ) => JSX.Element;
  initialColor?: string;
  fillColor?: string;
  hasReverse?: boolean;
}

Package Sidebar

Install

npm i react-timeline-animation

Weekly Downloads

126

Version

1.2.3

License

ISC

Unpacked Size

19 kB

Total Files

5

Last publish

Collaborators

  • akashuba