DEV Community

loading...

Discussion on: Build Simple Timeline in React

Collapse
alekswritescode profile image
Aleks Popovic Author

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. :)