Jump to content
Search Community

Count Up number with horizontal scrolltrigger

Red Bag test
Moderator Tag

Recommended Posts

@Red Bag can you please fork Mikel's example and show more about what you're trying to do? It isn't very clear from your description. These forums aren't intended to be a place where you can describe something and have us build it for you. We're happy to answer any GSAP-specific questions, of course, but you'll have the best chance of getting a good answer if you provide a CodePen demo (even if it's not totally working, of course). 

 

I'm quite confident that anything you dream up is entirely possible to accomplish with GSAP & ScrollTrigger...we just need to understand what you're trying to do and see it in context. 

Link to comment
Share on other sites

 

Hey @Red Bag

 

Since you are not using native horizontal scrolling, but 'faking' the horizontal scroll with a tween on vertical scrolling, you'd have to do some calculations yourself  for detecting when the section you want to adress, actually comes into viewport.

 

This demo from the demo page

 

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

 

 

as well as these threads might be helpful for you to understand how that could be achieved

 

 

 

 

 

The second thread linked contains a lengthy explanation on when and why you'd have to also calculate an 'offset' - which in your case won't be neccessary because your  fake horizontal ScrollTrigger's duration is equal to the amount you translate each section to the left. So you'd want to leave that out and just calculate based on the offsetLeft of each section (or the jQuery equivalent) and the window's width.

 

Instead of using the jQuery countup, I'd recommend counting the text up with GSAP ( just like mikel showed is a great way ) so you have more control over it.

 

Hope this helps.

 

  • Like 5
Link to comment
Share on other sites

 

In a case a such, you could avoid that error e.g. by checking if the section has a certain class before creating the counter-ScrollTriggers ( I added a class of 'counter' to your counter-sections here ).

 

You could either do so inside of the forEach for the sections like this 

 

sections.forEach((sct, i) => {

  if (sct.classList.contains("counter")) {

    const count = sct.querySelector(".count");

    ScrollTrigger.create({

      ...

    })

  }

})

 

See the Pen 070241cecb186c54a93831963048b3dd by akapowl (@akapowl) on CodePen

 

 

 

 

...or probably better, you could at the start create an array with only those counter-sections like you did for the other sections and have the forEach-loop loop over that array instead.

 

let sections = gsap.utils.toArray(".module"),
    countSections = gsap.utils.toArray(".module.counter"),
    container = document.querySelector("#container"),
    scrollTriggerEnabled;
countSections.forEach((sct, i) => {

  const count = sct.querySelector(".count");

  ScrollTrigger.create({
 	...
  })

});

 

See the Pen 43a73267fda4d19d4520a4c0d2bd2462 by akapowl (@akapowl) on CodePen

 

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

I am grateful for all your support.
I'm new to learn GSAP, hope you all don't mind I got many question. One more question, if the section got more than 2 numbers, how it could do for all to animated? And the animation was done once only, can it be loop when scroll to right again?

 

See the Pen xxRYOBr by redbad (@redbad) on CodePen

Link to comment
Share on other sites

  • 1 month later...

Then just use a proxy object and then format things in an onUpdate:

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

 

Format function that takes a number, adds commas, and a fixed number of decimal places:

function format(value, decimals) {
  const a = value.toFixed(decimals).split(".");
  return a[0].replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,") + "." + a[1]; 
}

 

Link to comment
Share on other sites

13 minutes ago, Red Bag said:

That's great, but if the number without decimals or some of number we wish not to have more than 1 decimals, how can we hide it ?

Didn't you just say earlier that you always want it to keep 2 decimal places?: 

 

21 hours ago, Red Bag said:

example: 1.60 and the code only able to display 1.6 

 

I'm confused.

 

These are general logic questions that are unrelated to GSAP - we really try to keep these forums focused on GSAP-specific questions whenever possible. 

 

You should be able to just add some conditional logic to your onUpdate to do the formatting according to whatever logic you want. For example, if you want the function to skip the decimal for whole numbers:

function format(value, decimals) {
  const a = value.toFixed(decimals).split(".");
  return a[0].replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,") + ((value | 0) === value ? "" : "." + a[1]); 
}

Good luck!

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.
×
×
  • Create New...