How to make gui tween outwards instead of from a corner?

Help and Feedback Scripting Support
#1

https://gyazo.com/d34cb8f5d5f0a8e8b690f03a729cbae0
The issue is that it tweens from the corner, and i don’t know how to fix it.

local ts = game:GetService("TweenService")
script.Parent.MouseButton1Click:Connect(function()
	local pos = UDim2.new(0.27, 0,0.297, 0)
	local color = Color3.fromRGB(255, 255, 255)
	local size = UDim2.new(0.034, 0,0.053, 0)
	local grow = ts:Create(script.Parent,TweenInfo.new(0.3,Enum.EasingStyle.Linear,Enum.EasingDirection.InOut,0,true),{
		Size = size + UDim2.new(0.01,0,0.01,0),
		BackgroundColor3 = Color3.fromRGB(102, 102, 102),
	})
	local shrink = ts:Create(script.Parent,TweenInfo.new(0.3,Enum.EasingStyle.Linear,Enum.EasingDirection.InOut,0,true),{
		Size = size,
		BackgroundColor3 = color
	})
	grow:Play()
	grow.Completed:Connect(function()
		shrink:Play()
	end)
end)
#2

The easiest fix for you would be to set the element’s AnchorPoint to halfway (0.5) on X and Y, then reposition the element so that it’s approximately or directly where it was before you set AnchorPoint.

The other way to fix this is to add a position key to your tweening goals. Position should be a subtraction of half the X and Y axis growth (both scale and offset) in the grow tween and an addition of the same factor in the shrink tween.

4 Likes
#3

Elaborating a little on what colbert said, I believe (could be wrong, very tired and wanting to be helpful), that after setting the AnchorPoint to (0.5, 0.5) you would just add half of the UIObject’s size to it’s position. Example: if your Button has a size of (0, 80, 0, 40) and a position of (0, 20, 1, -140) you could set it’s AnchorPoint to (0.5, 0.5) (which moves it), and then change it’s position to be += UDim2.new(0, 80/2, 0, 40/2) which would have it’s position being (0, 60, 1, -120) to be in the same position as before.

2 Likes