AsKadir Posted February 29, 2020 Share Posted February 29, 2020 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 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 29, 2020 Share Posted February 29, 2020 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. 2 Link to comment Share on other sites More sharing options...
AsKadir Posted February 29, 2020 Author Share Posted February 29, 2020 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 More sharing options...
GreenSock Posted February 29, 2020 Share Posted February 29, 2020 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? 5 Link to comment Share on other sites More sharing options...
AsKadir Posted February 29, 2020 Author Share Posted February 29, 2020 @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 More sharing options...
ZachSaucier Posted February 29, 2020 Share Posted February 29, 2020 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. 3 Link to comment Share on other sites More sharing options...
AsKadir Posted February 29, 2020 Author Share Posted February 29, 2020 @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 More sharing options...
Solution GreenSock Posted February 29, 2020 Solution Share Posted February 29, 2020 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)); } }); }); }); 1 1 Link to comment Share on other sites More sharing options...
AsKadir Posted February 29, 2020 Author Share Posted February 29, 2020 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! 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 29, 2020 Share Posted February 29, 2020 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? 6 Link to comment Share on other sites More sharing options...
AsKadir Posted February 29, 2020 Author Share Posted February 29, 2020 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!!!😬 1 Link to comment Share on other sites More sharing options...
digitalfrci Posted February 11, 2021 Share Posted February 11, 2021 it worked nice ,very nice Link to comment Share on other sites More sharing options...
Red Bag Posted June 11, 2021 Share Posted June 11, 2021 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? 1 Link to comment Share on other sites More sharing options...
GreenSock Posted June 11, 2021 Share Posted June 11, 2021 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. 3 Link to comment Share on other sites More sharing options...
Red Bag Posted June 14, 2021 Share Posted June 14, 2021 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 More sharing options...
GreenSock Posted June 14, 2021 Share Posted June 14, 2021 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! 3 Link to comment Share on other sites More sharing options...
Red Bag Posted June 14, 2021 Share Posted June 14, 2021 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 comment Share on other sites More sharing options...
GreenSock Posted June 14, 2021 Share Posted June 14, 2021 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? 1 Link to comment Share on other sites More sharing options...
Red Bag Posted June 14, 2021 Share Posted June 14, 2021 See the Pen YzZRYvd by redbad (@redbad) on CodePen the number 248 and 64 without decimal and comma, the animated not workable Link to comment Share on other sites More sharing options...
GreenSock Posted June 14, 2021 Share Posted June 14, 2021 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 5 1 Link to comment Share on other sites More sharing options...
Red Bag Posted June 14, 2021 Share Posted June 14, 2021 Thanks for your help~ Link to comment Share on other sites More sharing options...
Skilltech Posted June 2, 2022 Share Posted June 2, 2022 @GreenSock Final question that's not so much a question: This should be a plugin or core. P.S. I love how this thread progressed to a full solution. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted June 2, 2022 Share Posted June 2, 2022 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now