How to make reusable component counter up animation in react typescript

[Krix]

I had tried some example in forum and youtube in react but it not work right. My expect is when counter in viewport it's will play once and not play when enterback or enter again. 

 

One of them(examples): 

See the Pen NWRGwYQ by snorkltv (@snorkltv) on CodePen

 

Current project: https://codesandbox.io/s/rough-pine-u48v3u?file=/src/App.js

See the Pen App.js by s (@s) on CodePen

[Cassie]

Hi there! Sounds like you have some scrolltrigger stuff to understand in order to get this working.

Let's start there - do you understand how toggleActions works?

 

Quote

toggleActions    String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".

See the Pen LYVKWGo by GreenSock (@GreenSock) on CodePen

[Krix]

Hi @Cassie, thank you for interesting of my question and I appreciated it.

When I testing same code in codesandbox and looking back to my local code I just found out my issue only happen in local and I already fixed it.