My name is Aleks and my goal is to create interesting and practical web based projects in React and JavaScript that will help you learn and improve as a developer.
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. :)
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
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. :)