Why is the resizing making the ui button go right and down instead of perfectley balanced

Honestly i don’t know where to put this

The issue is when i tween the size of theese buttons it goes right and down instead of like a balanced position

Issue:

What i wish to happen

First off, you posted the same video to bot the issue and the “wish to happen” part.

Second, that is because the anchor point of UI elements is the top left corner. So if you position anything you’re actually “putting the position of the top left corner to the given coordinates”, and when you resize it, you change the size from the top left corner outwards, making it bigger to the right and downwards.
Imagine in it like this: When you try and change the position of a part in the workspace, the “center” of the part changes, because the anchor point of parts is in the middle. But UI elements have it in the corner.

You can change the AnchorPoint coordinates of an element in the properties menu of your element, somewhere at the top. (0, 0) is always top left (because these are the X, Y coordinates starting from the top left). (1, 0) would be top right, (0, 1) is bottom left, and you can set it to the middle using (0.5, 0.5). Just make sure to reposition your elements after this, because changing the anchor point will change where you see the element.

Anchor point at (0.5, 0.5):
image

Anchor point at (0.1, 0.3):
image

1 Like