How to tween a frame's size from the center Instead of the top-left?

I’m trying to tween the size and background color of both a button (EatBtn) and its parent frame (EatFrame) when the button is clicked. The goal is to create a feedback animation where the size and color change smoothly.

However, instead of the size tween starting from the center of the frame and button (which is what I want), the size change seems to happen from the top-left corner. This causes the frame and button to shift during the tween, rather than stay in place. I’m not sure how to make the tween apply from the middle, so that the elements remain where they are visually.

Here’s the code I’m using for the tweening:

local player = game.Players.LocalPlayer
local character = player.Character or player.CharacterAdded:Wait()
local humanoid = character:WaitForChild("Humanoid")
local animation = Instance.new("Animation")
local userInputService = game:GetService("UserInputService")
local tweenService = game:GetService("TweenService")

animation.AnimationId = "rbxassetid://135856840673683"

local loadedAnimation = humanoid:LoadAnimation(animation)
local isPlaying = false

local eatingSound = script.Parent["minecraft eat (HD)"]

local chair = workspace:WaitForChild("Chair"):FindFirstChild("Seat")

local eatFrame = script.Parent.Parent
local eatBtn = script.Parent

local originalSizeFrame = eatFrame.Size
local originalColorFrame = eatFrame.BackgroundColor3
local originalSizeBtn = eatBtn.Size
local originalColorBtn = eatBtn.BackgroundColor3

eatBtn.AnchorPoint = Vector2.new(0.5, 0.5)
eatBtn.Position = UDim2.new(0.5, 0, 0.5, 0)

local function playCroppedSound(duration)
	eatingSound:Play()
	delay(duration, function()
		eatingSound:Stop()
	end)
end

local function isPlayerSittingInChair()
	local seatPart = character.Humanoid.SeatPart
	return seatPart and seatPart == chair
end

local function tweenElements(smallerSizeFrame, smallerSizeBtn, darkerColor, duration)
	local sizeTweenFrame = tweenService:Create(eatFrame, TweenInfo.new(duration), {Size = smallerSizeFrame})
	local colorTweenFrame = tweenService:Create(eatFrame, TweenInfo.new(duration), {BackgroundColor3 = darkerColor})
	local sizeTweenBtn = tweenService:Create(eatBtn, TweenInfo.new(duration), {Size = smallerSizeBtn})
	local colorTweenBtn = tweenService:Create(eatBtn, TweenInfo.new(duration), {BackgroundColor3 = darkerColor})

	sizeTweenFrame:Play()
	colorTweenFrame:Play()
	sizeTweenBtn:Play()
	colorTweenBtn:Play()
end

local function playAnimation()
	if not isPlaying and isPlayerSittingInChair() then
		local newSizeFrame = UDim2.new(originalSizeFrame.X.Scale * 0.9, originalSizeFrame.X.Offset * 0.9, originalSizeFrame.Y.Scale * 0.9, originalSizeFrame.Y.Offset * 0.9)
		local newSizeBtn = UDim2.new(originalSizeBtn.X.Scale * 0.9, originalSizeBtn.X.Offset * 0.9, originalSizeBtn.Y.Scale * 0.9, originalSizeBtn.Y.Offset * 0.9)

		tweenElements(newSizeFrame, newSizeBtn, Color3.fromRGB(80, 80, 80), 0.3)

		task.spawn(function()
			playCroppedSound(0.5)
		end)
		loadedAnimation:Play()
		isPlaying = true

		loadedAnimation.Stopped:Wait()
		isPlaying = false

		task.delay(0.3, function()
			tweenElements(originalSizeFrame, originalSizeBtn, originalColorFrame, 0.3)
		end)
	end
end

script.Parent.MouseButton1Click:Connect(function()
	playAnimation()
end)

userInputService.InputBegan:Connect(function(input, gameProcessed)
	if input.KeyCode == Enum.KeyCode.Q and not gameProcessed then
		playAnimation()
	end
end)

I’ve set the AnchorPoint of the button to (0.5, 0.5) to keep it centered within the frame. However, the EatFrame still tweens from the top-left corner, even though I want the size change to happen from the center. How can I ensure the frame tweens from the middle, keeping it visually in place during the size change?

Any suggestions would be appreciated. Thanks!

image

set the anchor point of the “Eat” frame to 0.5, 0.5 aswell

1 Like
eatFrame.AnchorPoint = Vector2.new(0.5, 0.5)
eatFrame.Position = UDim2.new(0.5, 0, 0.9, 0)

Looks like this fixed it. Agghhhhh im so dum dum

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