Jump to content
Search Community

BlakeDykes0104

Members
  • Posts

    3
  • Joined

  • Last visited

BlakeDykes0104's Achievements

  • Week One Done
  • One Month Later
  • One Year In

Recent Badges

3

Reputation

  1. Noted, sorry to make you wade through my mess. I'll make it a little easier next time 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. https://codepen.io/blakedykes/pen/MWJbOVo
  2. codepen has been added. I added a console.log for the "oldTJCValue" after it's parsed and it is removing the comma.
  3. 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); }
×
×
  • Create New...