React countup animation starts immediately after the page loading , should start when scrolled to the component (without jquery)

Question

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:

    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>)}

Updated code:

    import CountUp, { startAnimation } from 'react-countup';
    import VisibilitySensor from 'react-visibility-sensor';

    class className extends Component {

        state = {
            scrollStatus: true
        };


        onVisibilityChange = isVisible => {
            if (isVisible) {
                if (this.state.scrollStatus) {
                    startAnimation(this.myCountUp);
                    this.setState({ scrollStatus: false });
                }
            }
        }
    render() {
             return (
            <div className={style.componentName}>
             <h2>Heading</h2>
             <VisibilitySensor onChange={this.onVisibilityChange} offset = {{ top: 
              10}} delayedCall>
             <CountUp className={style.countup} decimals={1} start={0} end={25} 
             suffix=" %" duration={3} ref={countUp => { this.myCountUp= countUp;}}/>
             </VisibilitySensor>
            </div>)}
}

score 35 · Answer 1 · edited Mar 05 '20 at 07:58

35

The API may have changed since last year. I manage to make this work with this code now :

import React from "react";
import CountUp from "react-countup";
import VisibilitySensor from 'react-visibility-sensor';

const MyComponent = () => (
  <>
    <CountUp end={100} redraw={true}>
        {({ countUpRef, start }) => (
            <VisibilitySensor onChange={start} delayedCall>
                <span ref={countUpRef} />
            </VisibilitySensor>
        )}
    </CountUp>
  </>
);

export default App;

I use this component inside a tab, so the redraw={true} prop is only here to redraw the animation on tabChange.

edited Mar 05 '20 at 07:58

Charming Robot

2,460
2
17
34

answered Sep 03 '19 at 15:10

Thibault

424
5
5

this should be answer with current version – online.0227 Oct 31 '19 at 06:11
5

How do I make it run just once istead of everytime it enters viewport? – Sushmit Sagar Jan 17 '20 at 11:18
Clean and simple. Thanks. – Charming Robot Mar 05 '20 at 04:30
Works for me after hours of fighting with the two libraries trying other approaches. Thanks! – Nick Kinlen Apr 16 '20 at 23:10
`findDOMNode is deprecated in StrictMode` and work arounds? – user Dec 19 '20 at 20:26
export default not should be export default MyComponent ? – Ezequiel De Simone Apr 28 '23 at 20:19

Tadas Antanavicius · Answer 2 · 2018-07-08T00:18:02.387

Per React CountUp's README, you can use the startAnimation hook to manually kick off the animation. Combine this with something like react-visibility-sensor, and you can wait to kick off the animation until it is visible in the user's browser.

import React, {Component} from 'react';
import CountUp, {startAnimation} from 'react-countup';
import './App.css';
import VisibilitySensor from 'react-visibility-sensor';

const style = {
  componentName: {},
  col: {},
  countup: {},
};

class App extends Component {
  constructor(props) {
    super(props);
    this.onVisibilityChange = this.onVisibilityChange.bind(this); // Bind for appropriate 'this' context
  }

  onVisibilityChange(isVisible) {
    if (isVisible) {
      startAnimation(this.myCountUp);
    }
  }

  render() {
    return (
      <div className={style.componentName}>
        <h2>Heading</h2>
        <div className={style.col}>
          <div>My counter</div>
          <VisibilitySensor
            onChange={this.onVisibilityChange}
            delayedCall // Prevents react apps triggering elements as visible before styles are loaded
          >
            <CountUp className={style.countup} decimals={1} start={0} end={25} suffix=" %" duration={3}
                     ref={countUp => { this.myCountUp = countUp; }} // From react-countup README 
            />
          </VisibilitySensor>
        </div>
      </div>
    );
  }
}

export default App;

As is, it will startAnimation every time you scroll to the countup. If you want to only do that once, just add a piece of state that gets set after the first render (and then prevent it from doing startAnimation again based on that altered state).

Less elegant (not recommended) ways to accomplish the same effect might include:

Use the built-in animation triggers (i.e. changing the props duration, end, start) by setting them equal to some state that changes when the user scrolls down
Leveraging the onStart prop, called before the animation starts, to delay starting the animation until the user scrolls down

EDIT: Update to address your second question

Unfortunately, it looks like the react-countup library doesn't expose a way to prevent startAnimation on startup.

But we can hack together a fairly elegant fix by manipulating the end prop using state instead:

import React, {Component} from 'react';
import CountUp, {startAnimation} from 'react-countup';
import './App.css';
import VisibilitySensor from 'react-visibility-sensor';

const style = {
  componentName: {},
  col: {},
  countup: {},
};

class App extends Component {
  state = {
    didViewCountUp: false
  };


  onVisibilityChange = isVisible => {
    if (isVisible) {
      this.setState({didViewCountUp: true});
    }
  }

  render() {
    return (
      <div className={style.componentName}>
        <h2 style={{fontSize: '40em'}}>Heading</h2>
        <VisibilitySensor onChange={this.onVisibilityChange} offset={{
          top:
            10
        }} delayedCall>
          <CountUp className={style.countup} decimals={1} start={0} end={this.state.didViewCountUp ? 25 : 0}
                   suffix=" %" duration={3} />
        </VisibilitySensor>
      </div>)
  }
}

export default App;

used state to set a value after first render. It works perfectly! Thank you very much. :) But one small bug,the counter at the beginning is at end count=25 and animation starts on scroll to the component. i.e there's a small amount of time before animation of 0-25 start. — user659730, Jul 03 '18 at 13:39
Could you edit your question with the updated code? Will help to try it out and maybe can suggest a fix in the context of what you have — Tadas Antanavicius, Jul 03 '18 at 15:13
I updated the code. it is exactly as the code that ur answer. Using state to do the "startAnimation" just once. — user659730, Jul 07 '18 at 13:41

Sushmit Sagar · Answer 3 · 2020-01-17T12:04:15.480

Here's my implementation. It just runs once and also doesn't re-render every time the component enters viewport to check visibility.

Dependencies:
1. react-countup v.4.3.2
2. react-visibility-sensor v.5.1.1

import React, { useState } from "react";
import CountUp from "react-countup";
import VisibilitySensor from "react-visibility-sensor";

const Ticker = ({ className, ...rest }) => {
  const [viewPortEntered, setViewPortEntered] = useState(false);

  return (
    <CountUp {...rest} start={viewPortEntered ? null : 0}>
      {({ countUpRef }) => {
        return (
          <VisibilitySensor
            active={!viewPortEntered}
            onChange={isVisible => {
              if (isVisible) {
                setViewPortEntered(true);
              }
            }}
            delayedCall
          >
            <h4 className={className} ref={countUpRef} />
          </VisibilitySensor>
        );
      }}
    </CountUp>
  );
};

export default Ticker;

Here's how to use it:

<Ticker className="count" end={21} suffix="M+" />

score 3 · Answer 4 · answered Jul 09 '21 at 05:22

Here is my solution using class based component Note: import two Libraries first run this code react-visibility-sensor react-countup

import React from "react";
import CountUp from "react-countup";
import VisibilitySensor from 'react-visibility-sensor';

class CountDown extends React.Component {
    render() {
        return (
            
                <React.Fragment>
                    <CountUp start={0} end={100} prefix="+" duration="2">

                        {({ countUpRef, start }) => (
                            <VisibilitySensor onChange={start} delayedCall>
                                <span ref={countUpRef} />
                            </VisibilitySensor>
                        )}

                    </CountUp>
                </React.Fragment>
           

        )
    }
}

export default CountDown;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

coding-spidy · Answer 5 · 2022-11-11T10:45:07.397

2

Simply add below prop

enableScrollSpy: true

<CountUp enableScrollSpy={true} end={75}/>

edited Nov 11 '22 at 10:45

answered Nov 11 '22 at 10:43

coding-spidy

41
3

Easiest solution of all as it's built-in already. Thank you for saving hours. – invinciblemuffi Aug 29 '23 at 14:23

score 1 · Answer 6 · answered Jun 26 '18 at 14:17

The docs for that library have a way to manually start the counter. I would use that approach to start the counter once a user has scrolled to the required distance.

import React, { Component } from 'react';
import CountUp, { startAnimation } from 'react-countup';

const MyComponent = () => (
  <div>
    <CountUp className="CountUp" start={0} end={100} duration={3} ref={(countUp) => {
      this.myCountUp = countUp;
    }} />
    <button className="Button" onClick={(event) => {
      startAnimation(this.myCountUp);
    }}>Count me up!</button>
  </div>
);

export default App;

Link to Github. Read the README at the very bottom.

Gagan V · Answer 7 · 2020-01-20T06:51:51.627

you can have look at my functional component to achieve this

import React from "react";
    import { Box } from "@material-ui/core";
    import CountUp from "react-countup";
    import VisibilitySensor from "react-visibility-sensor";

    export default function Counter() {
      const [focus, setFocus] = React.useState(false);
      return (
        <Box component="div">
          <CountUp start={focus ? 0 : null} end={100} duration={5} redraw={true}>
            {({ countUpRef }) => (
              <div>
                <span ref={countUpRef} />
                <VisibilitySensor
                  onChange={isVisible => {
                    if (isVisible) {
                      setFocus(true);
                    } 
                  }}
                >
                  <a>+</a>
                </VisibilitySensor>
              </div>
            )}
          </CountUp>
        </Box>
      );
    }

This runs everytime component enters viewport while scrolling. Doesn't answer the question asked. — Sushmit Sagar, Jan 18 '20 at 10:39
hi @Sushmit I have edited the code you can take a look at it, I think it resolves your issue — Gagan V, Jan 20 '20 at 06:52

score 0 · Answer 8 · answered Mar 01 '22 at 17:03

react-visibility-sensor doesn't seem to be maintained at the moment and produces warnings related to findDOMNode which is deprecated.

I've used react-waypoint in my functional component which makes the animation only trigger once when the user has the child of the waypoint component in view.

    // Ticker.tsx

import React, { useState } from "react";
import CountUp from "react-countup";
import { Waypoint } from "react-waypoint";

type TickerProps = {
  end: number;
  suffix: string;
}

const Ticker: React.FC<TickerProps> = ({ end, suffix }) => {
  const [viewPortEntered, setViewPortEntered] = useState(false);

  const onVWEnter = () => {
    setViewPortEntered(true);
  }

    return (
      <Waypoint onEnter={onVWEnter} >
        <div>
          {viewPortEntered && <CountUp end={end} suffix={suffix} start={0} /> }
        </div>
      </Waypoint>
    );
};

export default Ticker;

score 0 · Answer 9 · answered Nov 07 '22 at 04:59

0

<CountUp
        className={styles.number}
        start={0}
        end={number}
        enableScrollSpy={true}
        scrollSpyDelay={0}
        suffix={index !== -1 ? "+" : ""}
/>

try this scroll spy should do the work

answered Nov 07 '22 at 04:59

Suyash Sahu

1
1

score 0 · Answer 10 · answered Jan 08 '23 at 06:48

Here's an alternative solution using react-in-viewport package. Idea is to define this element and use <CountUpInViewport> instead of <CountUp>.

This example fires on the first entry. One could do variations on this to refire every time it enters/leaves the viewport.


import React from 'react';
import { useRef } from 'react';
import CountUp from 'react-countup';
import { useInViewport } from 'react-in-viewport';

let CountUpInViewport = props => {
  const ref = useRef();
  const { enterCount } = useInViewport(ref);
  return (
    <div ref={ref}>
      {
        enterCount > 0 ?
        <CountUp key='in' {...props}></CountUp> :
        <CountUp key='out' {...props}></CountUp>  // ensures drawn when not visible
      }
    </div>
  );
}

React countup animation starts immediately after the page loading , should start when scrolled to the component (without jquery)

10 Answers10

Linked