Simple GUI Ripple module

Resources Community Resources
#1

I am sure many people eagerly want to make a ripple button click animation for their roblox games.
Something like this:

2024-11-23 19-29-29

But most do not know how they can do this. Some who do end up making this are stopped by a baracade called C O R N E R S. A ripple effect will never work in such corners. And for that reason I have created an extremely basic module which allows you to fix the issue and provide pretty cool ripple effects!

Here is what the module can do:


See how it neatly covers the corners?

Any who, I don’t have the energy to make this “exciting” soo…

If you wonder how to use this then it’s extremely simple.

local RippleModule = require(game:FindFirstChild("RippleModule",true)
local Button = -- path to your button
RippleModule.AssignClickEvent(Button)

RippleModule.Ripple(Button,Vector2.new(50,50)) -- Used to make automatic ripples.
Source Code 
local TweenService = game:GetService("TweenService")
local ContentProvider = game:GetService("ContentProvider")
local UserInputService = game:GetService("UserInputService")
local inset = game:GetService("GuiService"):GetGuiInset()
if inset.Y == 0 then
	inset = Vector2.new(0,35)
end

local imageID = "rbxassetid://119914075615892"

ContentProvider:PreloadAsync({imageID})

local RippleExpandTweenInfo = TweenInfo.new(0.5,Enum.EasingStyle.Cubic,Enum.EasingDirection.Out)

local function Ripple(Parent:GuiObject,Position:Vector2)
	local parentGui = nil
	local corner = Parent:FindFirstChildOfClass("UICorner")
	for _,v in game.Players.LocalPlayer.PlayerGui:GetChildren() do
		if Parent:IsDescendantOf(v) then
			parentGui = v
			break
		end
	end
	if not parentGui then return end

	local AbsSize,AbsPos = Parent.AbsoluteSize,Parent.AbsolutePosition
	local ripplePosition = ((Position-AbsPos)-inset)

	local canvasGroup = Instance.new("CanvasGroup")
	canvasGroup.Name = "Ripple"
	canvasGroup.Parent = parentGui
	canvasGroup.Size = UDim2.fromOffset(AbsSize.X,AbsSize.Y)
	canvasGroup.Position = UDim2.fromOffset(AbsPos.X,AbsPos.Y)
	canvasGroup.BackgroundTransparency = 1
	canvasGroup.ZIndex = 9999999
	if corner then
		corner:Clone().Parent = canvasGroup
	end

	local ripple = Instance.new("ImageLabel")
	ripple.Name = "RippleImage"
	ripple.Parent = canvasGroup
	ripple.Size = UDim2.fromScale(0,0)
	ripple.BackgroundTransparency = 1
	ripple.Image = imageID
	ripple.AnchorPoint = Vector2.one/2
	ripple.ScaleType = Enum.ScaleType.Fit
	ripple.ZIndex = 9999999

	ripple.Position = UDim2.fromOffset(ripplePosition.X,ripplePosition.Y)
	local size = math.max(AbsSize.X,AbsSize.Y)
	TweenService:Create(ripple,RippleExpandTweenInfo,{ImageTransparency = 1,Size = UDim2.fromOffset(size,size)}):Play()

	task.delay(0.5,function()
		ripple:Destroy()
		canvasGroup:Destroy()
	end)
end

return {
	AssignClickEvent = function(Frame:GuiObject)
		Frame.InputBegan:Connect(function(input)
			if input.UserInputType == Enum.UserInputType.MouseButton1 then
				Ripple(Frame,UserInputService:GetMouseLocation())
			end
		end)
	end,
	MakeRipple = Ripple
}

Bye.

  • Cool
  • Not Cool

0 voters

27 Likes
#2

Wow. This is a very useful module for UI design. It looks good and is easy to use. Thank you very much for this cool module. I will be using this in my project.

rock n roll :guitar:

1 Like
#3

Ever since i learnt canvas groups, yea its soo helpful.
Good use of canvas groups nice

2 Likes
#4

Thank you!

Yep, I saw a post about this feature in canvas groups where it clips the corners properly. After that I just used it and it works pretty nice.

I might even end up making more gui animation models for all the developers out there who want quick and :sparkles: beautiful :sparkles: UI animations as well as some hovering animations. What do you think about it? Should I do it?

Ah yes, Techno_Wasp. The guy who hates me I suppose just because I reported his clearly off-topic reply.

7 Likes
#5

That would probably help a lot! I once tried making an UI framework but i gave up also because there werent any good animations and i didnt have the time to make them. It would be a great idea imo but its your choice. If you decide to do it lmk : )

3 Likes
#6

Well if you said it then I’ll do it.

2 Likes
#7

We meet again. After about 30 mins :smiley:

I will defo use this as this looks really neat!!

3 Likes
#8

Absolutely, please do as this alone looks really cool!! :grin:

1 Like
#9

so, it basically uses canvasgroup w/ ImageLabel «effect» inside it and kinda overlays over button, right? sorry if my mind isnt cooking right now. looks cool though.

1 Like
#10

Yes, you are correct. It uses a canvas group which I manually set to the buttons size and then just have a ripple image expand. (I setted the canvas group outside of the button because it sort of made it cleaner and easier.)

Sure!!

Thanks!

2 Likes
#11

Hi, what devices does this work on?

Thanks

#12

All devices. Even with low graphics level because I am only rendering once singular frame.

#13

Very cool module, I think I’m implementing it wrong though. The instructions were a bit unclear on what to do. This code below does not work, however is error free.

local module = {}

local References = require(game:GetService("ReplicatedStorage"):WaitForChild("Modules"):WaitForChild("ReferencesClient"))
local RippleModule = require(References.ModulesFolder:WaitForChild("UI"):WaitForChild("RippleModule"))

local Buttons = {References.OpenShopButton, References.OpenRobuxButton, References.OpenCodesButton}


function module.runModule()
	local success, errorMessage = pcall(function()
		for i, button in pairs(Buttons) do
			print(i)
			print(button.Name)
			RippleModule.AssignClickEvent(button)
		end
	end)
	
	if errorMessage then
		print(errorMessage)
	end
end



return module

Can you explain what is wrong with this code and the proper way to implement it?

#14

Hmm, is the code actually running? Are the two print statements printing something?

#15

Where did u put the stuff?

It worked fine for me

Show a screen shot if explorer or share a .rbxl

#16

The prints are printing yes, Maybe something causing it could be that the buttons have transparent backgrounds and its the frame that the buttons are in that have the background?

#17

Hmmm, does the module work even without you using the module or not? Maybe it’s an issue with the click event not registering.

#18

Could you rephrase that? I don’t understand.

#19

Use the ripple module without your module which assigns stuff.

#20

I think I see whats happening, I was watching it closer and its working but it’s so faint because the background is a light blue. Is there a way to make it more noticable?