This content originally appeared on DEV Community and was authored by Alex Kashuba
Hi!
In this post, I'd like to introduce a react component, that was designed for animating the timelines and the scroll-dependent animations.
Firstly I try to find existing solutions, but they work with a solid timeline. In my case, I have a banner in the middle of the timeline. It gives me an idea to create a wrapper component for any part of the timeline, sticks or step circles whatever. You can see the full demo
The component uses the "render prop" pattern.
<TimelineObserver
initialColor="#e5e5e5"
fillColor="#53b374"
handleObserve={(setObserver) => (
<Timeline
className="timeline"
setObserver={setObserver}
/>
)}
/>
And we pass a ref to the setObserver function:
const timeline1 = useRef(null);
useEffect(() => {
setObserver(timeline1.current);
}, []);
<div id="timeline1" ref={timeline1} className="timeline" />
In order to filter already filled elements and prevent further position recalculations, we use the "id" prop.
In terms of optimization, we use the "IntersectionObserver" to interact with elements only if they are in the viewport. And the requestAnimationFrame to handle the color fill animation.
const callback = entries => {
entries?.forEach(entry => {
if (entry.isIntersecting) {
setObservable({
obs: entry,
observableList: observablesStore.current,
callbacks: callbacks.current,
});
}
});
};
const observer = useRef(new IntersectionObserver(callback, options));
You also can add a callback that fired after the element will fully cross the middle of the screen. (watch the demo)
const someCallback3 = () => {
setMessage3("Finish");
fireConfetti();
};
useEffect(() => {
setObserver(circle3.current, someCallback3);
}, []);
This is react-timeline-animation at first glance. Be free to suggest ideas or contributions, contacts in github below.
Code can be found in github.
And npm package.
This content originally appeared on DEV Community and was authored by Alex Kashuba
Alex Kashuba | Sciencx (2021-10-07T10:10:09+00:00) React timeline animation component. Retrieved from https://www.scien.cx/2021/10/07/react-timeline-animation-component/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.