ScrollTrigger Count Up number on scroll (horizontal)

[Its_Lefty]

Hi there!

I'm trying to integrate a continuous count up / down of multiple numbers (each of them with a specific value) on a horizontal scroller (based on a pen by @mikel)

 

Since I'm still learning JS, I am struggling to integrate the sample code to my project. At the moment nothing happens at all. The console log says that the var numbers are not applied to the timeline but I don't know how to exacly re-write the code. Sorry if the code is a bit messy, the count part begins at line 46. Thanks for any help! :)

See the Pen PoRYaPL by ItsLefty (@ItsLefty) on CodePen

[mvaneijgen]

HI @Its_Lefty is this something what you are looking for. I've updated `textContent` instead of `var` and set `snap: { textContent: 1 }` to snap to whole numbers. 

 

See the Pen ZExzjRq?editors=0111 by mvaneijgen (@mvaneijgen) on CodePen

[Its_Lefty]

Nice, thanks a lot and for explaining the issue!  
Would it be possible though to increase the number dynamically along the scroll-section (start to end marker) like mikels pen? So that if you reach the start, the number starts at 0 and if you keep on scrolling until the end, the final value will be displayed (if you scroll back it should be reversed). 

[mvaneijgen]

Take a look at the docs https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

If you want the ScrollTrigger animation too animate with the user scrolling you'll need to take a look at the `scrub` property. Adding `scrub: true` to the ScrollTrigger object should  be all you need.

 

And also check the `toggleActions`,  there you can set what the animation needs to do when onEnter, onLeave, onEnterBack, and onLeaveBack.

 

Be sure to also check the video on the docs page, everything is explained in detail in there. 

[Its_Lefty]

It is working now. The timings might need some adjustments though and I will have a look at the toggleActions. Thanks for your help! 

@mvaneijgen I need to add one decimal place (for example 100,5). I've modified the code using toFixed(1) but something is wrong now with the counting (I hope you don't mind me asking since it's not really GSAP-related):

 

 

See the Pen mdxbGKx by ItsLefty (@ItsLefty) on CodePen

Edited June 27, 2022 by Its_Lefty
updated code / new issue

[mvaneijgen]

@Its_Lefty international number, or just numbers that don't fall in the norm are always difficult. I've now changed the comma `,` to a dot `.`, set the snap value to `0.1` and then the code works as expected (only the first one is edited).

 

I've also updated the `onUpdate` function to get the number of the tween and then replacing the dot with a comma and that seems to work. 

 

See the Pen PoRoqzV?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Its_Lefty]

Awesome, thanks a lot!  Working perfectly!

[Its_Lefty]

@mvaneijgen Sorry to bring this up again, but is it possible to always display one decimal? So that it displays for example 42,0 instead of 42. I've read about toFixed(1), but I don't know how to implement it here.

[GreenSock]

Check out the helper function in the docs: 

https://greensock.com/docs/v3/HelperFunctions#format