A lot of portfolio websites today have some sort of a timeline which can be used in different ways. You can showcase your job and education history...
For further actions, you may consider blocking this person and/or reporting abuse
The end result looks great, but I can't really tell from looking at your article. Please consider adding a Codepen, Codesandbox or a link to a demo (I found it after 4 clicks) with your finished timeline. If I'm quickly scanning over an article, I want to see what I am building before I decide to invest more time into things like this.
I would like an option to make the timeline animate only once (so not every time you scroll up an down).
Hi Edwin - that is an excellent suggestion! I have added a Sandbox link at the end of the tutorial with the full demo. You can find it here: codesandbox.io/s/timeline-in-react...
Thank you for the feedback! I will make sure I have an online demo for all future projects and tutorials.
Hi Almar! You can find the full demo here: codesandbox.io/s/timeline-in-react...
I also added the link at the bottom of the tutorial and I will make sure to include a live demo in my future projects and tutorials. Thanks for the feedback!
Great 1 Just 💗 it! What it lacks is mobile responsiveness tho!!
I'm glad you liked it! The timeline itself is pretty much responsive out of the box if you don't change its container styling. My heading could use a bit of responsiveness, though. :)
Let me know if you have any questions or suggestions. Any feedback is welcome, really. :)
I've collected several React Timelines recently, while doing research for HistoryTimeline.com. I have a pretty decent collection of interactive timeline apps and software by now. You can see tips and best practices, also best design option, on each one.
Great project! But I'd recommend using the viewport width for the headline font size. That makes it more responsive. Something like 15vw works fine.
How to prevent popup animation of firing more than 1 time? Because it`s little bit annoying when user scrolls up and see animations again.
Hello Vladyslav! I believe the plugin doesn't have a true option for that. You can set animate prop to true or false on each timeline element and it will either animate them all the time, or not at all.
You should be able to do this in a couple of different ways, at least.
You can try playing with the React Visibility Sensor and I am pretty sure one of the timeline examples I saw uses this exact plugin for that effect. You can find the official plugin page here: npmjs.com/package/react-visibility... . Here is a demo of the React Visibility Sensor in action: codesandbox.io/s/p73kyx9zpm . It's a similar example and could be of help.
Second option would be utilizing React Intersection Observer plugin which you can find here: npmjs.com/package/react-intersecti... . If you go with this route - the timeline element accepts a prop called intersectionObserverProps which you can use to pass in the useInView component from the intersection observer.
I didn't personally set up any of these for this example, but that's what I would try.
It's an interesting use-case, so please let me know if you manage to do it. :)
Thanks, Bro, I just searching for it for a Project, Love you, bro.
That is awesome! Thank you very much Sharoz! <3