title: React countup animation starts immediately after the page loading , should start when scrolled to the component (without jquery)
body: <p>I have a react single page app, with multiple components. For the 5th component(visible only when scrolled down) I have a counter . Now I am using react-countup library to achieve the counter function. However , the counter starts soon as the page is loaded . Is it possible for countup to begin once we scroll down to the component.
  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 the first time.
  My code looks like this:</p>
  
  <pre><code>    render() {
           return (
           &lt;div className={style.componentName}&gt;
           &lt;h2&gt;Heading&lt;/h2&gt;
           &lt;div className={style.col}&gt;
           &lt;div&gt;My counter&lt;/div&gt;
           &lt;CountUp className={style.countup} decimals={1} start={0} end={25} suffix=" %" duration={3} /&gt;
          &lt;/div&gt;
          &lt;/div&gt;)}
  </code></pre>
  
  <p>Updated code: </p>
  
  <pre><code>    import CountUp, { startAnimation } from 'react-countup';
      import VisibilitySensor from 'react-visibility-sensor';
  
      class className extends Component {
  
          state = {
              scrollStatus: true
          };
  
  
          onVisibilityChange = isVisible =&gt; {
              if (isVisible) {
                  if (this.state.scrollStatus) {
                      startAnimation(this.myCountUp);
                      this.setState({ scrollStatus: false });
                  }
              }
          }
      render() {
               return (
              &lt;div className={style.componentName}&gt;
               &lt;h2&gt;Heading&lt;/h2&gt;
               &lt;VisibilitySensor onChange={this.onVisibilityChange} offset = {{ top: 
                10}} delayedCall&gt;
               &lt;CountUp className={style.countup} decimals={1} start={0} end={25} 
               suffix=" %" duration={3} ref={countUp =&gt; { this.myCountUp= countUp;}}/&gt;
               &lt;/VisibilitySensor&gt;
              &lt;/div&gt;)}
  }
  </code></pre>