How would I make button animations such as Google's?

Hi!

This is a pretty simple issue that I cant really think of a solution to.

For my buttons I want to make a press animation such as Google’s, when you click a button.

A desc. of it is when you push a button, it spawns a circle and fades out fast, kind of like this, but gray.
(i made it the time of the animation for an example)

Thanks for any help!

2 Likes

You would use TweenService. If you dont know how to use TweenService go to Here

You can use a tweening service and some guibuttons events

:troll-face:

The link doesn’t work, but I know about tweens.

My only issue is I don’t know how to keep it within the button.

Explain “within the button” im not sure what you mean

It would spill out of the frame a little bit. I’m also not great at using mouse.Position to create stuff from the center without probably 2 hours of real thinking/trial + error

I feel ya. You should use

Instance.MouseEnter:Connect(function()

end)

and

Instance.MouseLeave:Connect(function()

end)

Dont really know if you understand it fully. I would be integrating it with my WIP mouse script.

It uses script.Parent bc i have something deploying it to every insance that supports MouseButton1Click + MouseEnter/Leave

Yes. using TweenPosition() inside of MouseEnter and MouseLeave functions with what tweens you want would work. Tho you are asking something like Googles Button Tween. You would use (how i recreated it) to buttons on top of each other then get top button and tween it

set ClipsDescendants to true in the button, it will crop all of the children, then use tween service.

Trying to make a solution rn

local mouse = game.Players.LocalPlayer:GetMouse()
script.Parent.MouseButton1Down:Connect(function()
	if script.Parent.Parent.Visible == true then
		SoundClick:Play()
		local new = Instance.new("ImageLabel")
		new.ClipsDescendants = false
		new.Size = UDim2.new(0,0,0,0)
		new.Parent = script.Parent
		new.Image = "rbxassetid://4820210709" -- i will find something
		new.ImageTransparency = 0.7
		new.BackgroundTransparency = 1
		new.Position = UDim2.new(mouse.X, 0, mouse.Y, 0)
		print(mouse.X..mouse.Y)
		print("pos_"..new.Position)
		new.ImageColor3 = Color3.fromHSV(0, 0, 0)
		new:TweenSize(UDim2.new(0.125, 0, .211, 0), "Out", "Quint", .5, true)
		for i = 1, 300 do
			new.ImageTransparency -= 0.001
			task.wait(0.001)
		end
		new:Destroy()
	end
end)

Printing out the mouse.Position (not pos_new.Position got me “849447”, and it’s not working.