Jump to content
GreenSock

Its_Lefty

ScrollTrigger Count Up number on scroll (horizontal)

Go to solution Solved by mvaneijgen,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

Posted (edited)

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 by Its_Lefty
updated code / new issue
Link to comment
Share on other sites

@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

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Awesome, thanks a lot! :) Working perfectly!

Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×