Issue regarding scaling UI

[LitTurtleMan]

I’m currently making a staff UI system and have run into some trouble. I’m trying make it so that it tweens like this, basically just scaling the size. I’ve tried using UIAspectRatio but it just ends up being a circle.

This is what happens:

Here is the properties…

The script itself:

local GUI = game.Players.LocalPlayer:WaitForChild("PlayerGui").StaffSystem.ScreenGui
local Click = script.Parent
local Hover = Click.Parent.Hover
local Tools = GUI.Container
local TweenService = game:GetService("TweenService")

local Color = Color3.fromRGB(65, 62, 62)
local HoverColor = Color3.fromRGB(79, 141, 65)
local TweenInfoSettings = TweenInfo.new(0.3, Enum.EasingStyle.Quad, Enum.EasingDirection.Out)

local ExpandedSize = UDim2.new(0, 61, 0, 441)
local ExpandedPosition = UDim2.new(0.01, 0, 0.401, 0)
local CollapsedSize = UDim2.new(0, 61, 0, 57)
local CollapsedPosition = UDim2.new(0.01, 0, 0.884, 0)

local IsExpanded = false

local function TweenColor(target, color)
	local Tween = TweenService:Create(target, TweenInfoSettings, {BackgroundColor3 = color})
	Tween:Play()
end

Click.MouseEnter:Connect(function()
	TweenColor(Hover, HoverColor)
end)

Click.MouseLeave:Connect(function()
	TweenColor(Hover, Color)
end)

Click.MouseButton1Click:Connect(function()
	IsExpanded = not IsExpanded
	local NewSize = IsExpanded and ExpandedSize or CollapsedSize
	local NewPosition = IsExpanded and ExpandedPosition or CollapsedPosition

	local TweenSize = TweenService:Create(Tools, TweenInfoSettings, {Size = NewSize})
	local TweenPosition = TweenService:Create(Tools, TweenInfoSettings, {Position = NewPosition})

	TweenSize:Play()
	TweenPosition:Play()
end)

[The_DuckDeveloper (Dr Duck)]

I believe changing the anchor points of some of the ui elements would fix the problem.

[LitTurtleMan]

I’ve already tried this, didn’t seem to work

[123Felixcool (F311ix)]

You should try using size as a scale not a offset, like you’re doing for position.

[xxxwectorxxx (KeyMan)]

Also, you’d better use UiListLayonet

[WorldyBear_22 (WorldyBear)]

Not size but position. When you playtest a game, the viewport of the GUI changes, messing with the position of the UI instance. Using scale, you adjust your position to your likings in any device and fixes everything.