heyman333 / react-animated-numbers

👾 Library showing animation of number changes in react.js
MIT License
247 stars 30 forks source link

Fixed animation glitch because of font-width #41

Closed Mako-L closed 9 months ago

Mako-L commented 1 year ago

Solution is to adjust the transform value used in the to prop of the Spring component. Instead of using a fixed value for the translateY transform, you can use a dynamic value that is based on the number being animated. For example, you can use the numberHeight and numberWidth variables to calculate the vertical and horizontal offsets for each number, and then use these values to position the numbers correctly.

Note that in this example, the translateX transform is being used to horizontally center the numbers within their container. This should help to prevent the numbers from overlapping at the end of the animation.

heyman333 commented 1 year ago

@Mako-L hello :D

It's hard to know the code changes 😹 Can you simply re-commit your code changes without formatting the code?

thank you so much for your interest