How does one move UI Buttons aside when hovering over another?

[qMrSpooky (Nox)]

easy as that
I have 5 buttons, and I want each to move aside depending on what button I’m hovering on

so for example the middle button would put the first and second button to the left, and the 4th and 5th to the right; the first one would move all others to the right etc

I can usually do this normally but my method would include making separate tweens for each of the buttons (so if a player hovers over the 2nd one for example, I’d manually tween the first to the left and all other to the right
I was wondering if there’s any way to avoid that and make it simpler?

This is my current script

local TS = game:GetService("TweenService")

local Menu = script.Parent
local SettingsButton = Menu.Settings
local EditButton = Menu["Edit Character"]
local PlayButton = Menu.Play
local StoreButton = Menu.Store
local ExitButton = Menu.Quit

local TINFO = TweenInfo.new(.25, Enum.EasingStyle.Back, Enum.EasingDirection.InOut)
local TINFO2 = TweenInfo.new(.5, Enum.EasingStyle.Elastic, Enum.EasingDirection.Out)

local HoverRot = 15

local HoverScale = UDim2.fromScale(.125,.125)
local LeaveScale = UDim2.fromScale(.1,.1)

local function CreateTween(button, RotAmount, SizeScale)
	local frame = button.Frame
	local HoverEnterButton = TS:Create(button, TINFO, {Size = SizeScale})
	local HoverLeaveButton = TS:Create(button, TINFO2, {Size = LeaveScale})
	local HoverEnterFrame = TS:Create(frame, TINFO, {Rotation = RotAmount})
	local HoverLeaveFrame = TS:Create(frame, TINFO2, {Rotation = 0})

	return {
		HoverEnterButton = HoverEnterButton,
		HoverLeaveButton = HoverLeaveButton,
		HoverEnterFrame = HoverEnterFrame,
		HoverLeaveFrame = HoverLeaveFrame
	}
end

local SettingsTween = CreateTween(SettingsButton, HoverRot, HoverScale)
local EditTween = CreateTween(EditButton, HoverRot, HoverScale)
local PlayTween = CreateTween(PlayButton, HoverRot, HoverScale)
local StoreTween = CreateTween(StoreButton, HoverRot, HoverScale)
local ExitTween = CreateTween(ExitButton, HoverRot, HoverScale)

SettingsButton.MouseEnter:Connect(function()
	SettingsTween.HoverEnterButton:Play()
	SettingsTween.HoverEnterFrame:Play()
end)
SettingsButton.MouseLeave:Connect(function()
	SettingsTween.HoverLeaveButton:Play()
	SettingsTween.HoverLeaveFrame:Play()
end)

EditButton.MouseEnter:Connect(function()
	EditTween.HoverEnterButton:Play()
	EditTween.HoverEnterFrame:Play()
end)
EditButton.MouseLeave:Connect(function()
	EditTween.HoverLeaveButton:Play()
	EditTween.HoverLeaveFrame:Play()
end)

PlayButton.MouseEnter:Connect(function()
	PlayTween.HoverEnterButton:Play()
	PlayTween.HoverEnterFrame:Play()
end)
PlayButton.MouseLeave:Connect(function()
	PlayTween.HoverLeaveButton:Play()
	PlayTween.HoverLeaveFrame:Play()
end)

StoreButton.MouseEnter:Connect(function()
	StoreTween.HoverEnterButton:Play()
	StoreTween.HoverEnterFrame:Play()
end)
StoreButton.MouseLeave:Connect(function()
	StoreTween.HoverLeaveButton:Play()
	StoreTween.HoverLeaveFrame:Play()
end)

ExitButton.MouseEnter:Connect(function()
	ExitTween.HoverEnterButton:Play()
	ExitTween.HoverEnterFrame:Play()
end)
ExitButton.MouseLeave:Connect(function()
	ExitTween.HoverLeaveButton:Play()
	ExitTween.HoverLeaveFrame:Play()
end)

[tweenAll (Jam)]

You should use a UiListLayouts and UiScales for aligned buttons.

For example you might want a hierarchy like this

[qMrSpooky (Nox)]

Thank you so much! All I needed was UiListLayouts