GUI Ripple Effect

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

34 Likes

thank you. I needed something like this.

2 Likes

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

1 Like

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

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

1 Like

The video doesn’t seem to be functional?

2 Likes

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

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

oh ok well i saw it on microsoft so ye

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

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:

2 Likes

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

1 Like

The Microsoft GUI Mouse Near Button Effect part 2 ?

1 Like


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)

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

1 Like
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!

3 Likes

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!

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

2 Likes