Jump to content
Search Community

Some problem with counter

AsKadir test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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 comment
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 5
Link to comment
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 comment
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 3
Link to comment
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 comment
Share on other sites

  • Solution

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));
        }
      });
    });
});

 

  • Like 1
  • Thanks 1
Link to comment
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 comment
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?

  • Like 1
Link to comment
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 3
Link to comment
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 comment
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 3
Link to comment
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 5
  • Thanks 1
Link to comment
Share on other sites

  • 11 months later...

Thanks for the suggestion, @Skilltech. :)

 

I'm not sure where it'd fit in the core cleanly and having a plugin just for this one specific formatting case seems a tad like overkill. The helper functions in the docs are usually a better fit for very narrow use cases like this. When we make something into a plugin, that expands the API surface area which totally makes sense if enough people struggle with the problem. But in my experience, this only comes up once in a great while. I could be wrong, though. If others feel strongly that this deserves a dedicated plugin or something, chime in here with your vote. 👍

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