.fromTo starting from 0 instead of passed value when >1000

[BlakeDykes0104]

I am using fromTo to interpolate between numbers displayed in USD currency format on a web calculator. My current approach of grabbing the innerHTML of the element, stripping it of the "$" and ",", passing that value along with the new value into gsap.fromTo, and formating the number in an onUpdate function works fine unless the original value has a "," in it. If it does, the interpolation will start at 0 instead of the innerHTML value. I'm not sure why, since I know that the "," are being replaced in the original string. Attached is the relevant code. Thanks for the help!

 

 

//Formatter for currency
var formatter = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    maximumFractionDigits: 0,
})

 ...
 const oldTJCValue = parseInt(tjcCost.innerHTML.replace(/[$,]/g,""));
 const oldPublicValue = parseInt(publicCost.innerHTML.replace(/[$,]/g,""));
 const oldPrivateValue = parseInt(privateCost.innerHTML.replace(/[$,]/g,""));
        
 gsap.fromTo(tjcCost, 
   {innerHTML: oldTJCValue},
   {innerHTML: TJCTotalCost, duration: 1, onUpdate: formatNumber
 })
 
 gsap.fromTo(publicCost,
   {innerHTML: oldPublicValue},
   {innerHTML: publicTotalCost, duration: 1.5, onUpdate: formatNumber
 })

 gsap.fromTo(privateCost,
   {innerHTML: oldPrivateValue},
   {innerHTML: privateTotalCost, duration: 1.5, onUpdate: formatNumber
 })
}

//onUpdate function to format number to USD
function formatNumber(){
    this.targets()[0].innerHTML = formatter.format(this.targets()[0].innerHTML);
}

See the Pen LYxReOp by blakedykes (@blakedykes) on CodePen

[Visual-Q]

Kind of hard to tell as I can never manage to commit Regex rules to memory. but if as you say it only fails with numbers including "," that would seem to point to a failure in the Regex. I would try logging out those values to be sure they are yielding the right results.

 

Assuming an issue with Regex maybe this will help.

https://stackoverflow.com/questions/6649327/regex-to-remove-letters-symbols-except-numbers

 

If no luck with this please try making a codepen if possible so we can take a closer look.

 

[BlakeDykes0104]

codepen has been added. I added a console.log for the "oldTJCValue" after it's parsed and it is removing the comma.

[Visual-Q]

I bumped you...

 

Note it helps a lot if you simplify things and explain how it works. It's a bit much to expect people to first figure out how your project works in order to help you.

 

I'm not sure what the issue is but if anyone wants to take a run at this the code you need to pay attention is at the end, it animates a fromTo of innerhml between two supplied values.

 

Onupdate it formats the value presented in the innerHTML using the functions at the end.

 

To make it work shift the semester hours right to a value in and select an option  above and it counts out values,  if the starting value is in the thousands has an "," the formatted numbers restart from O. You can see in the unformatted values that it counts accurately between the supplied values so something in the formatted return is causing gsap to count from 0 instead.

 

Clear as mud.

 

See the Pen NWdbpww by Visual-Q (@Visual-Q) on CodePen

 

[GreenSock]

Yes, for future reference it would be much better if you could provide just a single tween with all the complexities stripped out, to demonstrate just the isolated issue. You'll have a much better chance of getting a prompt answer that way

 

I see two problems: 

1. The initial value is null (on the first run), so you're starting at NaN which defaults to 0. That's a logic issue in your code (only on the first run).
2. The "from" part of the fromTo() gets applied to the element directly, and then the "to" part pulls from there, thus your formatting gets applied and it ends up attempting to tween a value like "$1,000.00" to a value like 1500 which isn't compatible (complex string to a number with mis-matched formatting). 

There is one tweak I can make to CSSPlugin that'll handle this particular scenario better (you can preview it at https://assets.codepen.io/16327/gsap-latest-beta.min.js), but I'd strongly recommend animating plain proxy objects instead. You'll get better performance that way anyway because it's not having to convert back and forth from/to strings or risk value contamination. 

 

Here's a comparison: 

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

[BlakeDykes0104]

Noted, sorry to make you wade through my mess. I'll make it a little easier next time  

 

5 minutes ago, GreenSock said:

1. The "from" part of the fromTo() gets applied to the element directly, and then the "to" part pulls from there, thus your formatting gets applied and it ends up attempting to tween a value like "$1,000.00" to a value like 1500 which isn't compatible (complex string to a number with mis-matched

 

That's it! Formatting and updating the same target was my problem. I fixed it by creating a hidden <var>  to tween, and formatted it into my displayed cost div in the onUpdate function. Thanks for the help.

 

See the Pen MWJbOVo by blakedykes (@blakedykes) on CodePen