Count should start after the component is in view.

Is it possible for countup to begin once we scrolldown to the component , currently the count starts as soon as the page is rendered. Animation happens only once(which is good)after the page is loaded, but I would like the counter not to begin soon after the page is loaded, but when user scrolls down to the component first time. My code looks like this:

	render() {
	return (
	<div className={style.componentName}>
	<h2>Heading</h2>
	<div className={style.col}>
	<div>My counter</div>
	<CountUp className={style.countup} decimals={1} start={0} end={25} suffix=" %" duration={3} />
	</div>
         </div>)}

[aress31]

Why not adding an option out of the box to React CountUP to handle animation when component is in the viewport? 🤔

[Byloor]

@evatd Yes, Refer : https://stackoverflow.com/questions/51044090/react-countup-animation-starts-immediately-after-the-page-loading-should-start. we do it using react-visibility sensor package The second answer by Tadas Antanavicius helps. I’ve also updated my question with my solution. Let me know if it works:) If you want the count up to start evertime component is scrolled to view, then don’t set a state