Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
NasKadir

Some problem with counter

Go to solution Solved by GreenSock,

Recommended Posts

Hi!

I can't understand what am I doing wrong,

I have a counter with two numbers,

So when it starts, I'm getting a lot of digits after comma and in the end they will disappear.

 

How can I remove all these digits while animating?

Sorry for this question.

See the Pen YzXQyqJ by ChicagoJostik (@ChicagoJostik) on CodePen

Link to post
Share on other sites

Hey Aslan.

 

You just need to round the value inside of the onUpdate function. I'd use GSAP 3's snap utility method:

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

 

You could also use the RoundPropsPlugin or modifiers plugin in GSAP 2 if you're stuck with it for some reason.

  • Like 1
Link to post
Share on other sites
1 minute ago, ZachSaucier said:

Hey Aslan.

 

You just need to round the value inside of the onUpdate function. I'd use GSAP 3's snap utility method:

 

See the Pen

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

by GreenSock (@GreenSock) on CodePen

 

 

You could also use the RoundPropsPlugin or modifiers plugin in GSAP 2 if you're stuck with it for some reason.

@ZachSaucier Sorry, that didn't specified.

As you can see I've got first number decimal and it should stay decimal,

that's why I have condition inside of setToFixed().

RoundPropsPlugin will round all numbers to integer.

Link to post
Share on other sites

I'd recommend updating to GSAP 3. 

 

And you could simplify your code quite a bit: 

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

 

$(".counter").each(function() {
    var count = $(this),
        zero = {val:0};
    
    $(".animate").on("click", function() {
      gsap.to(zero, {
        val: count.data("number"),
        duration: 2,
        onUpdate: function() {
          count.text(zero.val.toFixed(1));
        }
      });
    });
});

In fact, you could dump jQuery too and make an even more efficient version: 

var timeline = gsap.timeline({paused: true});
gsap.utils.toArray(".counter").forEach(function(el) {
  var target = {val: 0};
  timeline.to(target, {
    val: el.getAttribute("data-number"),
    duration: 2,
    onUpdate: function() {
      el.innerText = target.val.toFixed(1);
    }
  }, 0);
});

document.querySelector(".animate").addEventListener("click", function() {
  timeline.play();
});

Does that help? 

  • Like 3
Link to post
Share on other sites

@ZachSaucier Sorry for disturbing you, Zach,

But in the end we will get decimal numbers in both cases,

I need to get 67 without comma zero and while animating there isn't should be comma zero for integer number.

As I said I have function which is checking is a number is integer or decimal,

if it is decimal, function will leave one digit after comma,

and if it is integer, function will return integer.

So it's probably working, but while animating I will get in both values some digits after comma.

 

So in my code the end is ok, but while animating there are digits after comma for integer number.

I can add toFixed(1) here:

function countNumber() {
  var final = zero.val.toFixed(1);
  count.text(final);
}

and result will be the same while animating, except I will get only one digit after comma,

but it's probably not what I want.

 

Sorry for my English, especially when I'm trying to explain)

 

I will try to show what I want like this:

for decimal while animating we get 0.1, 0.2, 0.3,  ... 87.0, 87.1, 87.2 (here is everything ok)

and also for integer we get 0.1, 0.2, 0.3, ... 66.8, 66.9, 67.

But I need for integer this animation 1, 2, 3, ... 65, 66, 67.

 

Link to post
Share on other sites

Just use toFixed(0) if you want to drop the decimal :) If you need it for both the animation and the text value then I suggest you use the modifiers plugin:

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

 

I could be misunderstanding what you're wanting. It seems like you're asking for two things at the same time: for decimals and for just integers. So I'm not sure exactly what you're asking for.

  • Like 2
Link to post
Share on other sites

@ZachSaucierSorry for my bad explanation.

I want to make universal function,

because inside my data attribute which is called data-number,

I will have dynamic digits, it can be integers or decimals.

 

So when it's a decimal my function should use toFixed(1),

when it's a integer toFixed(0).

And actually I got it in the end of animation,

but while animating I have decimals)

 

I'm so sorry, never mind about this question.

Sorry for your spending time.

 

I thought it was a gsap question, but I think it's not.

Link to post
Share on other sites

Oh, I see. Then here's a tweaked version of the code that should do what you're asking: 

$(".counter").each(function() {
    var count = $(this),
        zero = {val:0},
        num = count.data("number"),
        split = (num + "").split("."),
        decimals = split.length > 1 ? split[1].length : 0;

    $(".animate").on("click", function() {
      gsap.to(zero, {
        val: num,
        duration: 2,
        onUpdate: function() {
          count.text(zero.val.toFixed(decimals));
        }
      });
    });
});

 

  • Thanks 1
Link to post
Share on other sites
1 minute ago, GreenSock said:

Oh, I see. Then here's a tweaked version of the code that should do what you're asking: 


$(".counter").each(function() {
    var count = $(this),
        zero = {val:0},
        num = count.data("number"),
        split = (num + "").split("."),
        decimals = split.length > 1 ? split[1].length : 0;

    $(".animate").on("click", function() {
      gsap.to(zero, {
        val: num,
        duration: 2,
        onUpdate: function() {
          count.text(zero.val.toFixed(decimals));
        }
      });
    });
});

 

OMG!!!

Zach, you are the best!

I really appreciate your help!

Thanks a lot!

  • Like 1
Link to post
Share on other sites
7 minutes ago, AslanGoi said:

Zach, you are the best!

I really appreciate your help!

You do realize that Jack and I have been talking to you in this thread, right? :) 

  • Haha 3
Link to post
Share on other sites
14 minutes ago, ZachSaucier said:

You do realize that Jack and I have been talking to you in this thread, right? :) 

@ZachSaucier @GreenSock

Hahah! It was a hard day, I didn't even notice, that Jack was here!

Thanks a lot again!!!😬

  • Like 1
Link to post
Share on other sites
  • 11 months later...
  • 4 months later...
On 3/1/2020 at 3:43 AM, GreenSock said:

Oh, I see. Then here's a tweaked version of the code that should do what you're asking: 


$(".counter").each(function() {
    var count = $(this),
        zero = {val:0},
        num = count.data("number"),
        split = (num + "").split("."),
        decimals = split.length > 1 ? split[1].length : 0;

    $(".animate").on("click", function() {
      gsap.to(zero, {
        val: num,
        duration: 2,
        onUpdate: function() {
          count.text(zero.val.toFixed(decimals));
        }
      });
    });
});

 


How to include comma and decimal?

Link to post
Share on other sites

You can use this helper function to add commas and force 2 decimal places, for example: 

// adds commas and forces 2 decimal places.
function formatNumber(value) {
  let s = (+value).toLocaleString('en-US').split(".");
  return s[0] + "." + ((s[1] || "") + "00").substr(0, 2);
}

Just feed in a number and it'll return the formatted version of it. 

  • Like 2
Link to post
Share on other sites
On 6/12/2021 at 1:31 AM, GreenSock said:

You can use this helper function to add commas and force 2 decimal places, for example: 


// adds commas and forces 2 decimal places.
function formatNumber(value) {
  let s = (+value).toLocaleString('en-US').split(".");
  return s[0] + "." + ((s[1] || "") + "00").substr(0, 2);
}

Just feed in a number and it'll return the formatted version of it. 


Do i still need to edit the code after to insert the above code?

 

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



I'm trying to do the counting by on scroll but it's seem to scroll once to trigger the animation, how to let it to animated again when scroll to each number?

Link to post
Share on other sites
1 hour ago, Red Bag said:

Do i still need to edit the code after to insert the above code?

You weren't actually using the function at all in your code. 

 

Here's what I assume you wanted:

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

 

I removed the jQuery dependency too. All you need is GSAP. 

 

1 hour ago, Red Bag said:

How to let it to animated again when scroll to each number?

You want it to restart the animation each time the user scrolls that number into view from the bottom? That's what toggleActions are for. I just used "restart none none none" to get that effect, but you can do whatever you want. See the docs for details. 

 

Happy tweening!

  • Like 2
Link to post
Share on other sites

Great, that's what i need. But i found out if the number without decimal or comma, the counting animated was not workable.

Link to post
Share on other sites
12 minutes ago, Red Bag said:

But i found out if the number without decimal or comma, the counting animated was not workable.

I don't understand what you mean. Can you please provide a minimal demo

  • Like 1
Link to post
Share on other sites

I updated my pen before you posted - I just added a "clean()" function that allows it to read numbers that have commas in them. 

 

Anyway, the reason it looked like it wasn't working is simply because I had code in place to animate from the CURRENT value in the .innerText to whatever you have in the data-number. I was trying to give you more flexibility rather than always starting at 0. And you had the SAME value in both, so there was no animation happening since the start and end values matched. But you can easily force it to always start at zero by making this change: 

// OLD
proxy = {val: parseFloat(clean(element.innerText)) || 0}

// NEW
proxy = {val: 0}

Here's a fork: 

See the Pen oNZQqLL?editors=1010 by GreenSock (@GreenSock) on CodePen

  • Like 3
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.

×