Numbers shaking during animation

[poeck]

First off, this looks amazing! However, I'm facing a small issue while using it in my project.

The numbers seem to shake around quite a bit during the animation. This shaking effect is either not present or much less noticeable on the demo page (https://motion-number.barvian.me/).

I've attached a short video to this issue showing the shaking behavior I'm experiencing. The shaking may not be as visible in the video, so I recommend viewing it fullscreen. However, it's definitely noticeable when using the website in real-time.

Has anyone else encountered this issue or know of any potential fixes? Any help would be greatly appreciated!

https://github.com/user-attachments/assets/75229585-535b-4786-8d63-8fcbe04e17b0

[barvian]

Hi, thanks for filing 👋. Would you be able to add these styles to your page to see if they help?

[data-motion-number][style*="transform:"], [data-motion-number] span[style*="transform:"] {
  will-change: transform !important;
}

I didn't make this the default because it's technically harder on the GPU and I saw some issues with it on Firefox IIRC, but if it helps you I'll consider adding support for it to the package 🙂

[poeck]

Hi, thanks for filing 👋. Would you be able to add these styles to your page to see if they help?

[data-motion-number][style*="transform:"], [data-motion-number] span[style*="transform:"] {
  will-change: transform !important;
}

I didn't make this the default because it's technically harder on the GPU and I saw some issues with it on Firefox IIRC, but if it helps you I'll consider adding support for it to the package 🙂

On chrome, this seems to fix the shaking problem. On Firefox, the shaking seems to get worse and it also starts lagging. It kinda looks like the animation starts dropping down to something like 5 fps at the end, while the start is very smooth.

So for chrome, this change is definitely an improvement - but for Firefox, it seems to make the problem worse. For now, I will just conditionally apply this change to all browsers but Firefox. Maybe something similar should be done out of the box?

[poeck]

However, I just found another problem. Some digits seem to be misaligned and appear a bit blurry. It looks like this doesn't happen in firefox, but in chrome. Here is a screenshot:

This problem occurs with both with and without this new will-change css change.

[barvian]

However, I just found another problem. Some digits seem to be misaligned and appear a bit blurry. It looks like this doesn't happen in firefox, but in chrome. Here is a screenshot:

This problem occurs with both with and without this new will-change css change.

Interesting. Which version of the package are you using?

[poeck]

However, I just found another problem. Some digits seem to be misaligned and appear a bit blurry. It looks like this doesn't happen in firefox, but in chrome. Here is a screenshot: This problem occurs with both with and without this new will-change css change.

Interesting. Which version of the package are you using?

I'm using ^0.1.7, so I think the latest one. By the way, the screenshot looks like it was shot during the animation, but this was actually after the animation finished (so it was "stuck" like this).

[barvian]

Weird 🤔, which browser & font is that?

[poeck]

The browser is Chrome 129 on Linux (Ubuntu 22.04):

Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36.

The font is "Inter" from Google Fonts:

[poeck]

I realised that I've tested everything in firefox with 80% zoom level, which made the problems a lot worse. Now with 100% zoom level in firefox, will-change: transform !important; actually stops the numbers from shaking. It still looks like the frame rate drops down to ~5fps at the end of the animation, but overall I'd say this change also makes it better in firefox.

[barvian]

Great! I'll definitely look into adding support for this in the package.

[barvian]

As for the slow framerate, I'm working on a rewite in WAAPI (no Framer Motion) to address performance. I'd love to get your feedback if you're interested in testing it. It has a slightly different API that's subject to change: number-flow.barvian.me

[poeck]

As for the slow framerate, I'm working on a rewite in WAAPI (no Framer Motion) to address performance. I'd love to get your feedback if you're interested in testing it. It has a slightly different API that's subject to change: number-flow.barvian.me

I love the idea of making a version without framer motion! Bundle size is pretty important for my current use case and getting rid of the at least 34kb of framer motion would be awesome.

On Chrome this new package looks nearly perfect. The only thing I realized is that after the animation finished, the numbers shift by something like 1 pixel. With smaller text this shifting is easier to notice, but still totally acceptable. Would be better if its "pixel perfect", but this is a very small detail and it already looks great in my opinion.

On Firefox the fps look a bit better but still pretty low, maybe something like 10 fps (also more noticeable at the end of the animation). Tthe numbers also shake by a few pixels, both vertically and horizontally.

Fun fact, in August I was looking for a package like this but couldn't find any, so I created https://www.npmjs.com/package/react-spinning-number myself. However, mine is way more basic (only around 250 loc) and I'm sure yours is way more accessible and bullet proof - so I'm really happy I found this awesome package(s)!

[barvian]

Sweet, glad it's working fairly well! I'll add an option for the will-change CSS stuff because that should address the text shaking (at the expense of higher memory usage I think). I haven't seen the slow FPS on FF near the end so I'll look more into that. I'll check out your pkg!