Weird UI Behavior (MouseEnter, MouseLeave)

[ScriptCasual (VULQusd)]

Hey!

I’m trying to make a Hover Enter / Leave effect for my TextButtons, however they don’t act as I want them to. The actual hover works as it should 100%, but it bugs out if I switch between buttons really fast.

My thought is that theres something going wrong when changing the Size of the Object, because I’m changing Objects that arent a set size, they’re actually 3 different sizes spread out on 4 objects.

Here’s a video of what I mean:

Heres my code:

local TweenService = game:GetService('TweenService')

local function Hover()
	task.wait()
for _, Object in pairs(script.Parent:GetChildren()) do
	if Object:IsA('TextButton') then
		Object.MouseEnter:Connect(function()
				local HoverSize = Object.Size + UDim2.new(0.0175, 0, 0.0085, 0)
				Object.BackgroundTransparency = 0.2
				Object:TweenSize(HoverSize, Enum.EasingDirection.Out, Enum.EasingStyle.Sine, .25, true)
			end)
			Object.MouseLeave:Connect(function()
				local OriginalSize = Object.Size - UDim2.new(0.0175, 0, 0.0085, 0)
				Object.BackgroundTransparency = 0.4
					Object:TweenSize(OriginalSize, Enum.EasingDirection.Out, Enum.EasingStyle.Sine, .25, true)
		end)
	  end
   end
end

game:GetService('RunService').RenderStepped:Connect(Hover);

Thanks!

[DiscoDino01 (nullptr)]

The issue might be related to how quickly the MouseEnter and MouseLeave events are firing when switching between buttons rapidly. It’s possible that the size changes by these events are interfering with each other.

One way to address this is to cancel any ongoing tweens before starting a new one.

Code:

TweenService = game:GetService('TweenService')

function Hover()
    task.wait()
    for _,Object in pairs(script.Parent:GetChildren()) do
        if Object:IsA('TextButton') then
            local originalSize = Object.Size
            local hoverSize = originalSize + UDim2.new(0.0175, 0, 0.0085, 0)

            Object.MouseEnter:Connect(function()
                Object.BackgroundTransparency = 0.2
                TweenService:Create(Object, TweenInfo.new(0.25, Enum.EasingStyle.Sine, Enum.EasingDirection.Out), {Size = hoverSize}):Play()
            end)

            Object.MouseLeave:Connect(function()
                Object.BackgroundTransparency = 0.4
                TweenService:Create(Object, TweenInfo.new(0.25, Enum.EasingStyle.Sine, Enum.EasingDirection.Out), {Size = originalSize}):Play()
            end)
        end
    end
end

game:GetService('RunService').RenderStepped:Connect(Hover)

Edit:

Modifications

Moved originalSize and hoverSize outside so that they’re only calculated once.

Inside each event listener, creates a new Tween and immediately play it. This will cancel any ongoing tweens on the object and start a new one with the correct target size.

[ScriptCasual (VULQusd)]

Thank you! This seems to have resolved the issue. To summarize, TweenSize() was at fault since it lets another tween override, however using Create() on TweenService fixes this!

I appreciate the fast support