Move false when the ticker is not in view

[HyBDev]

Hi!
I would like to know if it's possible to configure the ticker to stop moving when it's not in-view.

Thanks!

[AndreasFaust]

Hello @HyBDev,
yes, you just need to use Intersection Observer to detect if the ticker’s container is in view or not and then modify the move-prop.
For a simple implementation of Intersection Observer I recommend this library: https://github.com/wellyshen/react-cool-inview

[HyBDev]

Thanks for the reply! :)
I tried to do it with an update of the move prop but I think I do something wrong because even with a onClick event, it doesn't seems to work.

const isClicked = () => { return click = true }

<Marquee onClick={isClicked}><Ticker speed={12} height={80} move={click}> {({ index }) => ( <> {[...Array(data.length)].map((e, i) => ( <span key={i}>{data[i]}</span> ))} </> )} </Ticker></Marquee>