DEV Community

loading...

Discussion on: Build Simple Timeline in React

Collapse
qnemes profile image
Vladyslav

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.

Collapse
alekswritescode profile image
Aleks Popovic Author • Edited

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