Expand UI upwards instead of downwards

Im trying to make some kind of responsive UI for a main menu im working on and this Image Button Expands downwards. How can i make it expand upwards?

Problem:

Code:

----- //< Services >// -----
local TweenService : TweenService = game:GetService("TweenService")
----------------------------

----- //< Variables >// -----
-- [Frames] --
local MainFrame = script.Parent
local ButtonsFrame = MainFrame.Buttons
local DonateFrame = MainFrame.Donate

--------------

-- [Buttons] --
local PlayButton = ButtonsFrame.PlayButton
local SettingsButton = ButtonsFrame.SettingsButton
local CreditsButton = ButtonsFrame.CreditsButton
local DonateButton = DonateFrame.DonateButton
---------------

-- [Settings] --
local SizeFactor = 1.1
local OriginalSize
----------------

--=======================================

----- //< Tween Infos >// -----
local ExpandTweenInfo = TweenInfo.new(0.25, Enum.EasingStyle.Quad, Enum.EasingDirection.Out)
-------------------------------

----- //< Functions >// -----
local function MouseEnter(button)
	
	if not OriginalSize then
		OriginalSize = button.Size -- Store the original size only once when first hovered
	end

	
	local Expand = TweenService:Create(button, ExpandTweenInfo, {
		Size = UDim2.new(
			OriginalSize.X.Scale * SizeFactor,
			OriginalSize.X.Offset,
			OriginalSize.Y.Scale * SizeFactor,
			OriginalSize.Y.Offset
		)
	})

	-- Play the tween
	Expand:Play()
	print("Expanded")
	
	button.MouseLeave:Connect(function()
		Expand:Cancel()
		local Shrink = TweenService:Create(button, ExpandTweenInfo, {
			Size = OriginalSize -- Reset to original size
		})
		Shrink:Play()
		print("Canceled")
	end)
end

-----------------------------

----- //< Main Code >// -----

PlayButton.MouseEnter:Connect(function()
	print("MouseHovering PlayButton")
	MouseEnter(PlayButton)
end)

SettingsButton.MouseEnter:Connect(function()
	print("MouseHovering PlayButton")
	MouseEnter(SettingsButton)
end)

CreditsButton.MouseEnter:Connect(function()
	print("MouseHovering PlayButton")
	MouseEnter(CreditsButton)
end)

DonateButton.MouseEnter:Connect(function()
	print("MouseHovering PlayButton")
	MouseEnter(DonateButton)
end)


-----------------------------

Sorry if the code is trash its my first time working with GUIs. Thanks for the help!

Found the answer if anyone has the same problem, experiment with the Property “AnchorPoint”. It might depend on which direction you want to change it. In my case changing it to 1 does the job.

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.