Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Red Bag

Count Up number with horizontal scrolltrigger

Recommended Posts

I'm using countup.js for number counter animation. How to trigger the number animation when horizontal scroll to the number? I had try to use waypoints.js but was not working.

Link to post
Share on other sites

Hi @mikel , thanks for your reply but that's not what i need. What i means is when horizontal scrolltrigger to the number and the number will do countup animation.

Link to post
Share on other sites

@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 post
Share on other sites

Here is my demo. 

 

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

 

When scroll to next section the "Number" will do countup animation not for starting to animated only.

Link to post
Share on other sites

When exactly would the number start counting up? When that section touches the left side of the screen? The center? When it first enters from the right? 

Link to post
Share on other sites

Yes, when it first enters from the right. When scroll to the right section, the number will start counting animation

Link to post
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 post
Share on other sites

I had tried to use gsap to do the number animation but still can't to do as when scroll to start the animation.

 

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

 

Link to post
Share on other sites

I assume you meant something like this?: 

See the Pen 78f10cfa3794bcefde412991bf8782ba?editors=0010 by GreenSock (@GreenSock) on CodePen

 

The basic idea is to just use an onEnter to do the tween, like this: 

onEnter: () => {
  gsap.to(count, {
    innerText: count.getAttribute("data-number"),
    snap: {innerText: 0.01},
    duration: 2
  });
}

 

  • Like 2
Link to post
Share on other sites

Yes, this is what I mean but i found a problem, if the first section don't had the number animation, the rest of the number animation is not working when scroll to.

 

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

 

Link to post
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 post
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 post
Share on other sites

Thanks a lot for all your help~

Link to post
Share on other sites
  • 1 month later...

Hi, I facing a problem, due to the number's length, the counter number animation in slider become not stable and seems like "vibrating". Any solution ?

 

https://codepen.io/redbad/pen/xxRYOBr

Link to post
Share on other sites

Why not just set a fixed width on the container? That's probably the easiest solution. Or I suppose you could use a fixed-width font and pad your numbers so they're always the same quantity. 

Link to post
Share on other sites

How to display running number (having zero in decimals) as now the code not able detect the zero.

example: 1.60 and the code only able to display 1.6 

 

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

Link to post
Share on other sites

Sorry Jack, I found out when the number had " , " (comma), the horizontal scroll will broken
and the below code will change the comma to dot.
 

onUpdate() {
  count.innerText = parseFloat(count.innerText).toFixed(2);
}

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

Link to post
Share on other sites

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 post
Share on other sites

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 ?

Link to post
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 post
Share on other sites

Sorry as I english not good to explained what i mean. Anyway, thanks for your help.

Link to post
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.

×