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

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

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

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

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

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