How would I go about making this click effect?

[emeraldpunch999 (oNea1Shaquil1e)]

Recently I’ve been trying to make a small circle appear and fade out when you click, I’m trying to achieve a similar effect as to that in the video. I tried an image sequence with a circle that fades out (plays when you click). And I also tried creating a circle using a gui with a tween (plays when you click). Neither of those solutions worked, I would appreciate any help, thanks!

Also, for the image sequence I used the code in the first reply on this post:
link

As you can see the video there’s an outline of a circle that fades in then out every time you click, I’m trying to achieve that.

[GuySalami (Choco1atte)]

Using UserInputService, UIStroke, UICorner, and UIAspectRatioConstraint, you can make a circle, with a white ring on mouseclick.

Here’s a working demo:

local ringThickness = 4 -- the uiStroke thickness
local initTransparency = 0.5 -- scale of 0 - 1

local initSize = 1 -- in pixels
local endSize = 30 -- in pixels

local easingDirection1 = Enum.EasingDirection.In -- for size tween
local easingStyle1 = Enum.EasingStyle.Quad -- for size tween
local length1 = 0.5 -- for size tween

local easingDirection2 = Enum.EasingDirection.In -- for transparency tween
local easingStyle2 = Enum.EasingStyle.Linear -- for transparency tween
local length2 = 0.5 -- for transparency tween

------------------------------------------------------------------------------------------------------

local tweenInfo1 = TweenInfo.new(length1, easingStyle1, easingDirection1) -- for size tween
local tweenInfo2 = TweenInfo.new(length2, easingStyle2, easingDirection2) -- for transparency tween

------------------------------------------------------------------------------------------------------

local TweenService = game:GetService("TweenService")
local UserInputService = game:GetService("UserInputService")

local effect = Instance.new("Frame")
effect.Size = UDim2.new(0,initSize,100,0)
effect.BackgroundTransparency = 1
effect.AnchorPoint = Vector2.new(0.5, 0.5)
effect.Parent = script

local stroke = Instance.new("UIStroke")
stroke.Name = "Ring"
stroke.Color = Color3.new(1,1,1)
stroke.Transparency = initTransparency
stroke.Thickness = ringThickness
stroke.Parent = effect

local corner = Instance.new("UICorner")
corner.CornerRadius = UDim.new(1,0)
corner.Parent = effect

local aspectratio = Instance.new("UIAspectRatioConstraint")
aspectratio.AspectRatio = 1
aspectratio.Parent = effect

UserInputService.InputEnded:Connect(function(input, processed)
	if input.UserInputType == Enum.UserInputType.MouseButton1 then
		local location = UserInputService:GetMouseLocation()
		
		local cloned = effect:Clone()
		cloned.Position = UDim2.fromOffset(location.X, location.Y) 
		
		local sizeTween = TweenService:Create(
			cloned, 
			tweenInfo1, 
			{
				Size = UDim2.new(0,endSize,100,0),
			}
		)
		
		local transparencyTween = TweenService:Create(
			cloned.Ring, 
			tweenInfo2, 
			{
				Transparency = 1
			}
		)
		
		local countCompleted = 0
		
		sizeTween.Completed:Connect(function()
			countCompleted = countCompleted + 1
			
			if countCompleted == 2 then
				cloned:Destroy()
			end
		end)
		
		transparencyTween.Completed:Connect(function()
			countCompleted = countCompleted + 1
			
			if countCompleted == 2 then
				cloned:Destroy()
			end
		end)
		
		cloned.Parent = script.Parent
		
		sizeTween:Play()
		transparencyTween:Play()
	end
end)

[emeraldpunch999 (oNea1Shaquil1e)]

Thank you, It works flawlessly!