translateY - Numbers don't align in the end of animation

[Devotee007]

I have done a counter. The left number scrolls slowly, the right one fast. In the end when they stop I want the numbers to align. But the left one is slightly off. I see that the translateY is done in px. Can I change that to use for example rem och %? 

See the Pen qBGdQKJ by Devotee007 (@Devotee007) on CodePen

[Devotee007]

Maybe it's just the font? When I write out "45" static I get the same position of the left and right number.

[mvaneijgen]

Yeah, seems to be just the font. If no GSAP is applied and you just write 45 in the box it is the same as when the animation has finished. 

[Devotee007]

But now I got another problem, I changed font and now the numbers do go the whole way up. Like the calculation in the JS (clientheight) doesn't seem to calculate the right height. 

[mvaneijgen]

Do you have an updated demo? I would double check if your calculations are correct, draw some borders around your elements to make sure there is not weird font spacing going on and/of make sure the font has fully loaded before you start the GSAP animation!

 

As per you previous question about percentages % you could also look in to xPercent and xPercent instead of using x an y.

[Devotee007]

I changed to offsetHeight and set a timeout so all had a chance to load before calculation. It worked. But maybe not the best solution.

[mvaneijgen]

If it works it works 🎉 happy tweening!