React count up on scroll

Question

I'm using react-countup plugin to animate a counter from 0 to identified number and i wanted to make this counter works only once on scroll when it's revealed first time.. and I used this code using react visibility censor

<CountUp start={0} end={4.8} duration={2} decimals={1}>
    {({ countUpRef, start }) => (
        <VisibilitySensor onChange={start}>
            <span ref={countUpRef} />
        </VisibilitySensor>
    )}
 </CountUp>

but then it's happening every time it's revealed in the page and i want it to happen only the first time

Does this answer your question? [React countup animation starts immediately after the page loading , should start when scrolled to the component (without jquery)](https://stackoverflow.com/questions/51044090/react-countup-animation-starts-immediately-after-the-page-loading-should-start) — Danial, Aug 29 '21 at 13:43
actually this was my first problem but i dealt with it using visibility sensor and this link was the reference i relied on.. but my problem now is that it's animating every time it's revealed on the page while scolling — Ahmed Gamal, Aug 29 '21 at 13:52

score 0 · Answer 1 · answered Aug 29 '21 at 13:37

0

why don't you try setting a variable to local storage that you reference if viewedOnce is true or false localStorage

answered Aug 29 '21 at 13:37

Chirume

59
2
8

I understood the idea and I'm trying to do so but I can't deal with the functionality of the library itself so please can you explain it with code – Ahmed Gamal Aug 30 '21 at 10:42

React count up on scroll

1 Answers1