How to Tween a GUIs size but centered?

Help and Feedback Scripting Support
, ,
#1

Hi everyone, I am trying to add an effect to a button in game that, when you press it, gets a tiny bit smaller and then goes back to its normal size (this is 100% just for effects). The things is, when I resize the button, it gets smaller but to the top left side corner. I would like it to get smaller on itself (centered). This is kinda hard to understand but its the best I can do… It’s as if its center of gravity was on the left top corner whereas I want it on the center. Here is my code.

local function resetStats()
	game.ReplicatedStorage.ResetStats:FireServer()
	script.Parent:TweenSize(UDim2.new(0.30, 0,0.059, 0), "In", "Linear", 0.1)
	wait(0.1)
	script.Parent:TweenSize(UDim2.new(0.33, 0,0.089, 0), "In", "Linear", 0.1)
end

script.Parent.Activated:Connect(resetStats)
8 Likes
#2

2 options come to mind

  1. use AnchorPoint and set it to Vector2.new(0.5, 0.5)
    this will make it so the position f the ui element is the center.

  2. or you can tween both its position and size at the same time
    GuiObject | Documentation - Roblox Creator Hub

16 Likes
#3

I tried the second solution although it messed it up completely, probably because I got the math wrong. How do I know what the new position should be?

#4

Try Ocipa’s first solution.

30chars

1 Like