bitttttten / mechanical-counter Goto Github PK

The animation glitches. Any idea what may be causing this?

First things first, what a cool library! I have been trying to achieve something so clean and readable that is built on top of existing animation libraries for years. I add this to fun projects and noticed that it sometimes has a rendering bug.

Example A:

Example B:

Example C:

I reduced my usage to the most basic form I could:

<div style={{
   fontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, ...`,
}}> <MechanicalCounter text={animatedValue} /> </div>

It appears that this is primarily caused by the nested span element.

You'll notice that the scale value, at rest, is not equal to 1 - though I didn't see any obvious reference to scale in your codebase, I think the culprit must be that the animation is stopping too soon for some reason which leaves the final animation state with some transition values instead of the final values.