[BUG] Jittery animations

[Miodec]

Describe the bug

The animations are jittery and not smooth. Here im comparing to Jquery.

In the first recording, if you follow the red box with your eyes, you will see its moving back and forth, while the blue one is solid.

In the second recording you can see that some frames the red box barely moves, while the blue box moves forward at a steady pace.

Provide a minimal reproduction demo of the bug

https://codepen.io/Miodec/pen/zxrVgbb

Screen.Recording.2025-11-08.at.17.45.22.mov

Screen.Recording.2025-11-08.at.17.46.06.mov

[juliangarnier]

I can't reproduce, I tried to compare with CSS too and honestly can't really see a difference between the 3: https://codepen.io/juliangarnier/pen/EaPqYYB/0bfd69f78b480705018c93da8fd92bc4?editors=0100

Here's a 240 fps slow motion recording of the CodePen demo running on a 120 Hz screen:

IMG_5043.mp4

I noticed engine.fps = 144, so I presume your screen is 144 Hz?

I suspect an issue with the fps capping, can you try increasing the value to 240 ?

[Miodec]

I can't reproduce, I tried to compare with CSS too and honestly can't really see a difference between the 3: https://codepen.io/juliangarnier/pen/EaPqYYB/0bfd69f78b480705018c93da8fd92bc4?editors=0100

Here's a 240 fps slow motion recording of the CodePen demo running on a 120 Hz screen:

IMG_5043.mp4
I noticed engine.fps = 144, so I presume your screen is 144 Hz?

I suspect an issue with the fps capping, can you try increasing the value to 240 ?

I see the same issue on your codepen... Hmmmm..

IMG_8243.mov

[Miodec]

Tried upgrading to Chrome 142 - same issue.
Tested Firefox 144 - same issue.

MacOS 15.6

My friend thats also using MacOS can see the jitter as well.

EDIT: I asked my Discord community and got various answers, so I don't think its OS related. Some saw jitter on Windows, some didn't. Some saw jitter on Linux.

[Miodec]

Looking at the profiler, when the jitter happens i noticed the tickEngine is called, but update, tick and render are not there. Could this help you track this down?

[Miodec]

Ok, last update from me, sorry for the spam.

Switching my monitor from 144hz to 120hz / 100hz / 75hz made the jitter go away. So to me it seems like some miscalculation with time delta between frames?

[juliangarnier]

Looking at the profiler, when the jitter happens i noticed the tickEngine is called, but update, tick and render are not there. Could this help you track this down?

Switching my monitor from 144hz to 120hz / 100hz / 75hz made the jitter go away. So to me it seems like some miscalculation with time delta between frames?

OK interesting, thank you so much for reporting this.

I think I have an idea of where this could be coming from, but can you confirm that setting a higher fps value to the engine, like engine.fps = 288, doesn't solve the issue when your monitor refresh rate is set to 144?

[Miodec]

Looking at the profiler, when the jitter happens i noticed the tickEngine is called, but update, tick and render are not there. Could this help you track this down?

Switching my monitor from 144hz to 120hz / 100hz / 75hz made the jitter go away. So to me it seems like some miscalculation with time delta between frames?

OK interesting, thank you so much for reporting this.

I think I have an idea of where this could be coming from, but can you confirm that setting a higher fps value to the engine, like engine.fps = 288, doesn't solve the issue when your monitor refresh rate is set to 144?

engine.fps = 288 looks the same as my previous video.

Speaking of fps, what happens if i set it to some stupid number like 1000? Will that cause performance issues? Basically, on my website, I want the animations to always run as fast as possible for every user (and obviously, different users will have different display refresh rates). Would it be possible to maybe add engine.fps = -1 which means "render on every requestAnimationFrame call"?

[juliangarnier]

Speaking of fps, what happens if i set it to some stupid number like 1000?

Nothing, but keep in mind that unfortunately web browser and DOM manipulation is extremely slow, even if you have an insane GPU, it's very easy to hit high of frame time, I capped the engine to 120 fps because I prioritize stable frame-rate.

Can you run this with your monitor set to 144 Hz and tell me if you see a difference ?

https://codepen.io/juliangarnier/pen/ogbKLWE

Thanks!

[Miodec]

Speaking of fps, what happens if i set it to some stupid number like 1000?

Nothing, but keep in mind that unfortunately web browser and DOM manipulation is extremely slow, even if you have an insane GPU, it's very easy to hit high of frame time, I capped the engine to 120 fps because I prioritize stable frame-rate.

Can you run this with your monitor set to 144 Hz and tell me if you see a difference ?

https://codepen.io/juliangarnier/pen/ogbKLWE

Thanks!

Both 144hz and 100hz are jittering.

[juliangarnier]

Sorry just realized I left engine.fps = 60; in the CodePen, I just changed it to engine.fps = 144; can you try again?

[Miodec]

Sorry just realized I left engine.fps = 60; in the CodePen, I just changed it to engine.fps = 144; can you try again?

100hz is ok, 144hz is jittering.

[juliangarnier]

Hmm so like before, and with engine.fps = 240 https://codepen.io/juliangarnier/pen/ogbKLWE ?

[Miodec]

Same thing, 100 ok, 144 jittering.