GUI Ripple Effect

Resources Community Resources
#1

So I bet more than half of you use windows and in windows you know the button click effect. So I made it for roblox.

With the code you need to make a frame called “Effect” (without quotation marks) with a UICorner with Size “1,0”

local MouseClickEffect = {}

local function Tween(OBJInstance,Goal,Duration)
 local ts = game:GetService("TweenService")
 local T = ts:Create(OBJInstance,TweenInfo.new(Duration),Goal)
 T:Play()
end

function MouseClickEffect.AddEffect(GUIInstance,Mouse,Duration)
 if GUIInstance.ClipsDescendants == false then
  GUIInstance.ClipsDescendants = true
 end
 if GUIInstance.AutoButtonColor == true then
  GUIInstance.AutoButtonColor = false
 end
 local MX,MY = Mouse.X,Mouse.Y
 local ASX,ASY = GUIInstance.AbsoluteSize.X,GUIInstance.AbsoluteSize.Y
 local XScale = (- ASX + MX) / ASX
 local YScale = ((- ASY + MY) / ASY)-3
 local effect = script.Effect:Clone()
 effect.Parent = GUIInstance
 effect.Position = UDim2.fromScale(XScale,YScale)
 local maxsize = math.max(ASX,ASY)*3
 effect:TweenSize(UDim2.fromOffset(maxsize,maxsize),"Out","Sine",Duration)
 Tween(effect,{BackgroundTransparency = 1},Duration)
 wait(Duration)
 effect:Destroy()
end

return MouseClickEffect

just paste this baby into a module script and you will be ready to go.

PROOF IT WORKS!

No offense on my GUI text and sorry for video lag

I hope you all liked this if not please don’t report this was my first Community Resource (I think)

  • Useful
  • Useful for other (cause I know how to make)
  • Useful for others but I don’t need it
  • Not Useful at all

0 voters

49 Likes
The Microsoft GUI Mouse Near Button Effect
Bubble click effect module
Help creating this UI effect
[EOL] PreloadService - Customizable way to load assets via ContentProvider [v2]
#2

thank you. I needed something like this.

3 Likes
#3

well welcome I originally planned to make this for my game but ended up making this public for others to see my creation

4 Likes
#4

1 question, when I do it, it says: Effect is not a valid member of ModuleScript. I think you forgot a step. Do you mind making it a model instead? Since what you made forgot some stuff

1 Like
#5

sorry i forget to mention that now i fixed it and u can see it

4 Likes
#6

The video doesn’t seem to be functional?

2 Likes
#7

Really cool, I lobve it!
But that effect is not made by Microsoft.
It’s the part of Matertial UI by Google.

(the effect is called “ripple” btw)

3 Likes
#8

This is super cool, I might use this. :slight_smile:

#9

oh ok well i saw it on microsoft so ye

2 Likes
#10

thank you all for such positive replies it really motivates me on making more resources and tutorials to help devs fulfil their goal.

2 Likes
#11

To allow others to find your topic, you can rename it to “Ripple Effect on Buttons” or something like that. I initially thought that the topic was about Windows XP’s button click sound :see_no_evil:

Nevertheless, great to see your method of achieving ripple effects, haven’t seen that before :eyes:

Material Design (Google)
material-button

Fluent Design (Microsoft)
1_1QRA4ynpM6UuunkOZaZsig

This resource is based on Google’s Material Design :stuck_out_tongue:

4 Likes
#12

well ok i will change it thanks for that and now you know its microsoft we talking about they are pretty smart in making things like those so i just tried to mimic there effect

3 Likes
#13

The Microsoft GUI Mouse Near Button Effect part 2 ?

2 Likes
#14


Hey, did I do it wrong? The setup should be more clear.

script.Parent.MouseButton1Click:Connect(function()
	require(game.ReplicatedStorage.ModuleScript).AddEffect(script.Parent, game.Players.LocalPlayer:GetMouse(), 0.2)
end)
1 Like
#15

hmm let me make the code a bit better I will update it in a while

3 Likes
#16 
local RippleEffect = {}

function RippleEffect.AddEffect(UIInstance,Mouse,Duration,Color)

local function Tween(Obj,Goal)

game:GetService("TweenService"):Create(Obj,TweenInfo.new(Duration),Goal):Play()

end

local ASX,ASY = UIInstance.AbsoluteSize.X, UIInstance.AbsoluteSize.Y

local APX,APY = UIInstance.AbsolutePosition.X, UIInstance.AbsolutePosition.Y

local MX,MY = Mouse.X,Mouse.Y

local Pos = UDim2.new(0,MX-APX,0,MY-APY)

local UBC3 = UIInstance.BackgroundColor3

local UR,UG,UB = UBC3.R, UBC3.G, UBC3.B

local UI = Instance.new("Frame",UIInstance)

UI.BackgroundColor3 = Color

UI.Name = "Ripple"

UI.ZIndex = 100001

local Corner = Instance.new("UICorner",UI)

Corner.CornerRadius = UDim.new(1,0)

UI.AnchorPoint = Vector2.new(0.5,0.5)

UI.Position = Pos

local MS = UDim2.fromOffset(math.max(ASX,ASY),math.max(ASX,ASY))

UI:TweenSize(MS,"Out","Sine",Duration)

Tween(UI,{BackgroundTransparency = 1})

wait(Duration)

UI:Destroy()

end

return RippleEffect

here sorry for the delay!

5 Likes
#17

Hello, your gui effect is awesome! But it doesn’t work for me for some reason:

I set the size of gui in offset in this video, but it doesn’t work in scale too. The mouse is a little bit off and the circle goes out of the gui borders. Edit: The mouse glitch is gone, I used not Player:GetMouse() , but UserInputService:GetMouseLocation(), that’s why the mouse was a bit off.
Here’s my code:

function module.Ripple(UIInstance,Mouse)
	local function Tween(Obj,Goal)
		game:GetService("TweenService"):Create(Obj,TweenInfo.new(Duration),Goal):Play()
	end

	local ASX,ASY = UIInstance.AbsoluteSize.X, UIInstance.AbsoluteSize.Y
	local APX,APY = UIInstance.AbsolutePosition.X, UIInstance.AbsolutePosition.Y
	local MX,MY = Mouse.X,Mouse.Y
	local Pos = UDim2.new(0,MX-APX,0,MY-APY)
	local UBC3 = UIInstance.BackgroundColor3
	local UR,UG,UB = UBC3.R, UBC3.G, UBC3.B
	
	local UI = Instance.new("Frame",UIInstance)
	UI.BackgroundColor3 = Color
	UI.Name = "Ripple"
	UI.ZIndex = 100001

	local Corner = Instance.new("UICorner",UI)
	Corner.CornerRadius = UDim.new(1,0)
	
	UI.AnchorPoint = Vector2.new(0.5,0.5)
	UI.Position = Pos

	local MS = UDim2.fromOffset(math.max(ASX,ASY),math.max(ASX,ASY))

	UI:TweenSize(MS,"Out","Sine",Duration)
	Tween(UI,{BackgroundTransparency = 1})

	wait(Duration)
	UI:Destroy()
end

I’m sorry if I missed something important, but I hope we can find a solution!

1 Like
#18

just turn on clip desendents for the gui object! sorry for late reply I have exams

4 Likes