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