Help fixing choppy animation on Buttons, Labels and GUI nodes.

Question

I have an AnimationPlayer animating the RectScale of a button.

I set the Pivot point to exactly the center of the button, this way it looks like it is shrinking and growing. However, the when I turn on the player, the animation choppy.

If I set the Pivot to (0, 0). all of the sudden the animation is crystal smooth. Yet the animation doesn't look natuaral as it it coming out of the top left of the image.

Is there a way to have the pivot in the center AND have smooth animation?

Answer 1

Ok, I hope this helps others who run into this problem. I created a Sprite node and did the same RectScale animation and everything was smooth as butter.
I then searched the net and found a post back in 2021 with the same problem. This only happens with GUI nodes like Labels, Buttons, etc.

Go to Project Settings|GUI|Common and there is a setting called "Snap Controls To Pixels"
Uncheck this setting and everything will animate smoothly now.

I am surprised there is no yellow alert triangle that pops up when you attach an AnimationPlayer to a GUI node. There really should be one to warn the user that animation is messed up with GUIs unless you turn off this setting.
The engine really should bypass this setting when animating.

Answer 2

There are several ways to fix choppy animation, depending on the cause of the problem. Some common solutions include:

1. Increasing the frame rate: A higher frame rate can make animations
   appear smoother.
2. Optimizing the animation code: Improving the performance of the
   animation code can also help to reduce choppiness.
3. Reducing the complexity of the animation: Simplifying the animation
   by reducing the number of moving elements or decreasing the
   resolution of images can help to improve performance.
4. Using hardware acceleration: Some animation techniques, such as CSS
   animations or WebGL, can take advantage of hardware acceleration to
   improve performance.
5. Updating drivers or software: Make sure that you have the latest
   drivers and software for your graphics card, web browser, or
   operating system.
6. Lowering the resolution or quality of the animation.
7. Optimizing the web page or application on which the animation is
   running to reduce the load on the system

If the problem still persists, it is best to profile and debug the animation to identify the specific cause of the choppiness and address it accordingly.