Need ImageButton to rotate upon MouseEnter

[HouseOfToy (Toy)]

I’m making a hover script that smoothly tweens the ImageButton and rotates it slightly when it’s hovered on, I know how to change the size when the mouse enters and leaves but I have no clue on how to make it rotate, any help would be appreciated. (beginner scripter)

The script:

local startSize = UDim2.new(0.062, 0,0.108, 0)
local hoverSize = UDim2.new(0.055, 0,0.108, 0)

script.Parent.MouseEnter:Connect(function()
	script.Parent:TweenSize(hoverSize,Enum.EasingDirection.Out,Enum.EasingStyle.Sine,.25,true)
end)

script.Parent.MouseLeave:Connect(function()
	script.Parent:TweenSize(startSize,Enum.EasingDirection.Out,Enum.EasingStyle.Sine,.25,true)
end)

[jasper53682 (ElGoblino)]

Here is an edit of your script that should do what you want (adjust it as needed):

local startSize = UDim2.new(0.062, 0, 0.108, 0)
local hoverSize = UDim2.new(0.055, 0, 0.108, 0)
local startRotation = 0
local hoverRotation = 10

local function rotateGui(gui, degrees)
	gui.Rotation = degrees
end

script.Parent.MouseEnter:Connect(function()
	script.Parent:TweenSize(hoverSize, Enum.EasingDirection.Out, Enum.EasingStyle.Sine, .25, true)
	rotateGui(script.Parent, hoverRotation)
end)

script.Parent.MouseLeave:Connect(function()
	script.Parent:TweenSize(startSize, Enum.EasingDirection.Out, Enum.EasingStyle.Sine, .25, true)
	rotateGui(script.Parent, startRotation)
end)

[Carl_Weezer13 (Carl_Weezer)]

You can probably use Tweenservice to rotate a gui:

local gui = YourButton
local TweenService = game:GetService(“TweenService”)
local Info = TweenInfo.new(time, easingdirection, easingstyle)

gui.MouseEnter:Connect(function()
     local NewTween = TweenService:Create(gui, Info, {Rotation = 90} — Rotates gui 90 degrees
     NewTween:Play()
end)

— Tween it back using same method for mouseleave

[HouseOfToy (Toy)]

Thanks a lot, this helped. Do you have any idea on how I would smoothly animate it similarly to the hover animation I provided in the video?

[9soulsxz (kash)]

Hey you can use the TweenService to smoothly rotate and use sine InOut to make it more smooth

local TweenService = game:Get service(“TweenService”)
local ui = --path to ui

ui.MouseEnter:Connect(function()
TweenService:Create(ui,Tween.new(0.45,Enum.EasingStyle.Sine, EasingDirection.InOut), {Rotation = 6 )}:Play()
end

[jasper53682 (ElGoblino)]

If you wanted to smoothly rotate it, here is an updated version to do this (again, adjust it as needed):

local startSize = UDim2.new(0.062, 0, 0.108, 0)
local hoverSize = UDim2.new(0.055, 0, 0.108, 0)
local startRotation = 0
local hoverRotation = 10
local rotationSpeed = 2 -- Adjust the speed of rotation here

local function rotateGuiSmoothly(gui, startAngle, targetAngle, speed)
	local direction = (targetAngle - startAngle) / math.abs(targetAngle - startAngle)
	for angle = startAngle, targetAngle, speed * direction do
		gui.Rotation = angle
		wait() -- Waits a frame before the next rotation step
	end
end

script.Parent.MouseEnter:Connect(function()
	script.Parent:TweenSize(hoverSize, Enum.EasingDirection.Out, Enum.EasingStyle.Sine, .25, true)
	rotateGuiSmoothly(script.Parent, startRotation, hoverRotation, rotationSpeed)
end)

script.Parent.MouseLeave:Connect(function()
	script.Parent:TweenSize(startSize, Enum.EasingDirection.Out, Enum.EasingStyle.Sine, .25, true)
	rotateGuiSmoothly(script.Parent, hoverRotation, startRotation, rotationSpeed)
end)

Hopefully this helps you with your game.