Simple UI Mouse Hover Module

Hi,

I made a UI Mouse Hover module for one of my games and I realized that there isn’t really any open sourced modules for something as simple as hovering animations. This module is very straightforward and simple; I don’t care if you modify it.

Get the module here: https://create.roblox.com/store/asset/134678650546187/HoverUI

Example Code:

local CollectionService = game:GetService("CollectionService")
local SoundService = game:GetService("SoundService")

local HoverSize = require(script.HoverUI)

HoverSize.useSound(SoundService.Hover)
HoverSize.connectAll(CollectionService:GetTagged("Button"))
--HoverSize.connectAll(CollectionService:GetTagged("Button"),
--	TweenInfo.new(0.3, Enum.EasingStyle.Quad), 1.2)

--HoverSize.connectButton(script.Parent["1"], tweenInfo, multiplier) -- connect specific button
--HoverSize.disconnect(script.Parent["1"]) -- connect specific button
--HoverSize.disconnectAll() -- disconnect all

Source Code
local Debris = game:GetService("Debris")
local TweenService = game:GetService("TweenService")

local Hover = {}
local Connections = {}

local sound_hover = nil :: Sound?

local function play(sound: any, parent)
	if typeof(sound) ~= "Instance" then
		return
	end
	
	if not parent then return end

	local Sound = sound:Clone():: Sound
	Debris:AddItem(Sound, sound.TimeLength)
	Sound.Parent = parent
	
	Sound:Play()
end

-- connects a single button
function Hover.connectButton(button : TextButton | ImageButton | Frame, tweenInfo: TweenInfo, multiplier: number?)
	assert(button)
	
	local tweenInfo = tweenInfo or TweenInfo.new(0.2)
	local mult = multiplier or 1.1
	
	local oldSize = button.Size
	local newSize = UDim2.fromScale(oldSize.X.Scale * mult, oldSize.Y.Scale * mult)
	
	local tweenIn = TweenService:Create(button, tweenInfo, {Size = oldSize})
	local tweenOut = TweenService:Create(button, tweenInfo, {Size = newSize})
	
	Connections[button] = button.MouseLeave:Connect(function(x: number, y: number) 
		tweenIn:Play()
	end)
	
	Connections[button] = button.MouseEnter:Connect(function(x: number, y: number) 
		tweenOut:Play()
		
		if not sound_hover then return end
		play(sound_hover, button)
	end)
end

-- connects buttons in a table
function Hover.connectAll(table: {}, tweenInfo: TweenInfo, multiplier: number?)
	for _, button in pairs(table) do
		Hover.connectButton(button, tweenInfo, multiplier)
	end
end

-- changes hover sound | default is nil
function Hover.useSound(sound: Sound)
	assert(sound)
	
	sound_hover = sound
end

-- disconnects a single button
function Hover.disconnect(button)
	if not Connections[button] then
		return
	end
	
	Connections[button]:Disconnect()
end

-- disconnects all connections
function Hover.disconnectAll()
	for _, connection in pairs(Connections) do
		if typeof(connection) ~= "RBXScriptConnection" then
			continue
		end

		connection:Disconnect()
	end
end

return Hover
2 Likes

Because it is so simple it doesn’t need a module for it. No need to go down the npm i is-odd rabbit hole.

Still - cool stuff.

1 Like

Yeah but regardless intermediates can still learn from sources like this. I get that point though.