Ui Magnifying issue

Help and Feedback Scripting Support
#1

So a lot of games have it when you hover over a button it gets bigger. I have an issue when you enter and leave the button fast the button magnifies and never unmagnifies.

local sound = game.ReplicatedStorage.OtherSounds.MouseEnter_Leave
local object = script.Parent
script.Parent.MouseEnter:Connect(function()
	sound:Play()
	
	object:TweenSize(UDim2.new(0,210,0,60), Enum.EasingDirection.InOut, Enum.EasingStyle.Sine, 0.5)
end)


script.Parent.MouseLeave:Connect(function()
	
	object:TweenSize(UDim2.new(0,200,0,50), Enum.EasingDirection.InOut, Enum.EasingStyle.Sine, 0.5)
end)

A little video:

1 Like
#2

My question is (to make it more clear), how would I make it so when you hover it dosent do this?
I think its because of the TIME it takes for it to tween

1 Like
#3

Try adding a small timeout like

wait(.02)

I use it in my UI too.

2 Likes
#4

I think its because it will not untween until the size is 0,210,0,60.

2 Likes
#5

There is a parameter after the time parameter in the TweenSize() function called override. If you set that to true for both tweens, it’ll override the currently playing tween, which should fix the issue.

object:TweenSize(UDim2.new(0,210,0,60), Enum.EasingDirection.InOut, Enum.EasingStyle.Sine, 0.5, true)

and

object:TweenSize(UDim2.new(0,200,0,50), Enum.EasingDirection.InOut, Enum.EasingStyle.Sine, 0.5, true)

4 Likes
#6

so how would I add this into my script?

1 Like
#7

When the mouse leaves the button, if the tween is still playing, it needs to cancel the previous tween before it can play the ‘shrink’ tween. This also is the case vise-versa, meaning it needs to cancel the ‘shrink’ tween before it can play the ‘grow’ tween. The issue is, there is no way (that I am aware of) to cancel a TweenSize() function. Instead you will have to use the Tween Service and make a custom Tween that changes the size. Here is an example with the tween cancellation added:

local sound = game.ReplicatedStorage.OtherSounds.MouseEnter_Leave
local tweenService = game:GetService("TweenService")
local object = script.Parent
local GrowTween = TweenService:Create(object, TweenInfo.new(
    0.5,
    Enum.EasingStyle.Sine,
    Enum.EasingDirection.InOut),
    {Size = UDim2.new(0,210,0,60)}
)

local ShrinkTween = TweenService:Create(object, TweenInfo.new(
    0.5,
    Enum.EasingStyle.Sine,
    Enum.EasingDirection.InOut),
    {Size = UDim2.new(0,200,0,50)}
)

script.Parent.MouseEnter:Connect(function()
	sound:Play()
    GrowTween:Cancel()
    ShrinkTween:Cancel()
	GrowTween:Play()
end)


script.Parent.MouseLeave:Connect(function()
	GrowTween:Cancel()
    ShrinkTween:Cancel()
	ShrinkTween:Play()
end)

Try this, hopefully it works otherwise you may need to instantiate the tween each time. Good luck!

Edit: In the time writing this, @pwnion suggested using the override argument, which I was unaware of but may be easier and efficient.

2 Likes
#8

I think it would be easier, but I have never used that so dont know what to do

1 Like
#9

Yeah, my method should work and it’s much simpler! @AstonAceMan’s method would work, but if you want to keep things compact, I recommend my method.

1 Like
#10

So how would I set it to true?

1 Like
#11

I think like this object:TweenSize(UDim2.new(0,200,0,50), Enum.EasingDirection.InOut, Enum.EasingStyle.Sine, 0.5, true )

1 Like
#12

Just put a comma and the word true after the 0.5.

Like so:

2 Likes
#13

Thanks for all the help! @AstonAceMan I will also use your idea on this.

1 Like