Problem with UI increasing in size constantly

Help and Feedback Scripting Support
#1

I’m trying to make it so when the mouse enters the UI element, it increases in size and then decreases in size when the mouse leaves, however if I constantly have my mouse enter/leave the element, it progressively gets bigger. Please note, I can’t just set a specific size, ex.

v:TweenSize(UDim2.new(0.75, 0, 0.75, 0), Enum.EasingDirection.Out, Enum.EasingStyle.Sine, 0.25)

As there are different sized buttons

for _, v in pairs(Frame:GetChildren()) do
	if v:IsA('ImageButton') then
		v.MouseEnter:Connect(function()
			v.ImageColor3 = Color3.fromRGB(116, 171, 180)
			v.Icon.ImageColor3 = Color3.fromRGB(248, 246, 231)
			local OriginalX, OriginalY = v.Size.X.Scale, v.Size.Y.Scale
			v:TweenSize(UDim2.new(OriginalX + 0.2, 0, OriginalY + 0.2, 0), Enum.EasingDirection.Out, Enum.EasingStyle.Sine, 0.25)
		end)
		
		v.MouseLeave:Connect(function()
			v.ImageColor3 = Color3.fromRGB(248, 246, 231)
			v.Icon.ImageColor3 = Color3.fromRGB(116, 171, 180)
			local OriginalX, OriginalY = v.Size.X.Scale, v.Size.Y.Scale
			v:TweenSize(UDim2.new(OriginalX - 0.2, 0, OriginalY - 0.2, 0), Enum.EasingDirection.In, Enum.EasingStyle.Sine, 0.25)
		end)
	end
end
2 Likes
#3

Stated that clearly in my question

1 Like
#4

Have you considered storing the original size outside of your event callbacks?

for _, v in pairs(Frame:GetChildren()) do
	if v:IsA('ImageButton') then
		local OriginalSize = v.Size

		v.MouseEnter:Connect(function()
			v.ImageColor3 = Color3.fromRGB(116, 171, 180)
			v.Icon.ImageColor3 = Color3.fromRGB(248, 246, 231)
			v:TweenSize(OriginalSize + UDim2.new(0.2, 0, 0.2, 0), Enum.EasingDirection.Out, Enum.EasingStyle.Sine, 0.25)
		end)
		
		v.MouseLeave:Connect(function()
			v.ImageColor3 = Color3.fromRGB(248, 246, 231)
			v.Icon.ImageColor3 = Color3.fromRGB(116, 171, 180)
			v:TweenSize(OriginalSize, Enum.EasingDirection.In, Enum.EasingStyle.Sine, 0.25)
		end)
	end
end
8 Likes
#5

Try this module:

1 Like