How could I make a UI object only tween when it's being hovered over?

Help and Feedback Scripting Support
,
#1

Hello! :wave:

I’m looking to create a hover effect similar to Robeats:

I only need help with the rotation.

Here’s (a basic version of) my current code, which has unexpected results:

local TextAnimation = true

Button.MouseEnter:Connect(function)
	TextAnimation = true

	while TextAnimation == true do
		local RotationTween = TweenService:Create(Text,TweenInfo.new(1, Sine, Enum.EasingDirection.InOut), {Rotation = 8})
		RotationTween:Play()
		RotationTween.Completed:Wait()

		local RotationTween2 = TweenService:Create(Text,TweenInfo.new(2, Sine, Enum.EasingDirection.InOut), {Rotation = -8})
		RotationTween2:Play()
		RotationTween2.Completed:Wait()
	end
end)

Button.MouseLeave:Connect(function)
		TextAnimation = false

		TweenService:Create(Text,TweenInfo.new(1, Enum.EasingStyle.Exponential, Out), {Rotation = 0}):Play()
	end
end)

Instead of stopping the Tween after the mouse cursor is moved off of the button, it finishes the tween that happens before.

Any help or feedback would be incredible!! I’ve been debugging this for so long… :upside_down_face:

#2

Use that GuiObject’s MouseEnter event which is fired whenever a local player’s mouse cursor hovers over the GuiObject.

#3

Yes, I already did this - the issue is mainly that there’s issues with the Tween after the mouse leaves (ether it keeps going, or it doesn’t start the next time the mouse enters the button).

#4

Seems like you could try to create a global variable (variable that is outside of all functions / statements)

For example:


local TextAnimation = true

local tweenanim

Button.MouseEnter:Connect(function()
	TextAnimation = true

	while TextAnimation == true do
		local RotationTween = TweenService:Create(Text,TweenInfo.new(1, Sine, Enum.EasingDirection.InOut), {Rotation = 8})
		RotationTween:Play()
		tweenanim = RotationTween
		RotationTween.Completed:Wait()

		local RotationTween2 = TweenService:Create(Text,TweenInfo.new(2, Sine, Enum.EasingDirection.InOut), {Rotation = -8})
		RotationTween2:Play()
		tweenanim = RotationTween2
		RotationTween2.Completed:Wait()
	end
end)

Button.MouseLeave:Connect(function()
        TextAnimation = false
	tweenanim:Stop()
	-- Do whatever to reposition the gui 
end)
#6

You could nil the tween and then play the reverse when the MouseLeave event is fired. Something like in the following.

local tweens = game:GetService("Tweens")
local guiObject = script.Parent
local tween = nil

guiObject.MouseEnter:Connect(function()
	if tween then
		tween:Cancel()
		tween = nil
	end
	tween = tweens:Create(guiObject, TweenInfo.new(1), {})
	tween:Play()
end)

guiObject.MouseLeave:Connect(function()
	if tween then
		tween:Cancel()
		tween = nil
	end
	tween = tweens:Create(guiObject, TweenInfo.new(1), {})
	tween:Play()
end)

If you want a more dynamic tween then you could scale the time according to the “distance” from the goal properties table.

#7

I don’t think you really understand the subject here, I don’t want it to tween one way when entered then another when left, I want it to rotate back and forth only while it’s being hovered over.

I’ve come up with a really bad solution to it and the post is resolved.

#8 
local tweens = game:GetService("TweenService")
local run = game:GetService("RunService")

local guiObject = script.Parent
local mouseIn

guiObject.MouseEnter:Connect(function()
	mouseIn = true
	while mouseIn do
		run.RenderStepped:Wait()
		local tween = tweens:Create(guiObject, TweenInfo.new(1, Enum.EasingStyle.Linear, Enum.EasingDirection.Out, 0, true, 0), {Rotation = 180})
		tween:Play()
		tween.Completed:Wait()
	end
end)

guiObject.MouseLeave:Connect(function()
	mouseIn = false
end)

Relatively simple, there’s a parameter which represents whether or not the tween should reverse, all you need to do is have the tween repetitively play while the mouse is inside the GuiObject, once outside this loop should be stopped.

1 Like
#10

I appreciate the additional help, but the issue has been solved.

#11

I know, but you didn’t state your solution (for others who happen to visit this thread) & you mentioned it was “really, really bad”.

1 Like
#12

I just checked and this worked far better than what I did - thank you for the help

1 Like