Adding bounce animations to UI

Help and Feedback Scripting Support
#1 
play.Activated:Connect(function()
    play:TweenPosition(UDim2.new(play.Position), 'Out', 'Bounce', 1, false)
end)

I’m trying to make it so when you click the button, the button move down a little and then back up, like you are actually clicking a button. I know I could just set it’s Y coordinate to go down say 5 pixels, then back up 5 pixels, but that does not seem like the most efficient way and so I’m trying to experiment with different UI animation styles. This just made the UI go to some random place though, dont know why

3 Likes
#2

When using UDim2.new(), you need to use specific coordinates instead of just inputting (play.Position).
For example, UDim2.new(0.25, 0, 0.25, 0).

Also look to these links for help:

#3

try using the new TweenService, and I believe the tween style you are after might be back, not bounce. this way you can move it up 5px by decreasing the Y offset, then have it automatically revert back to its original position, as the TweenService has a reverse property.

#4 
play.Activated:Connect(function()
	play:TweenPosition(UDim2.new(0.5, 0, -0.95, 0), 'Out', 'Back', 0.1, false)
	wait(0.1)
	play:TweenPosition(UDim2.new(0.5, 0, -1, 0), 'Out', 'Back', 0.1, false)
end)

This is what I’ve had to do because I don’t really know what else to do, but this still seems really inefficient

#5

I assume you mean this by the effect:

https://gyazo.com/4e2ba78908bed3339b38a70fa57a950c

Here’s what you can do to achieve this:

local TweenService = game:GetService("TweenService")
local yourButton = script.Parent

local tweenInfo = TweenInfo.new(0.1, Enum.EasingStyle.Linear, Enum.EasingDirection.Out, 0, true)
local buttonEffect = TweenService:Create(yourButton, tweenInfo, {Position = UDim2.new(6, 0, 3.02, 0)})

script.Parent.MouseButton1Click:connect(function()
	buttonEffect:Play()
end)

I’m basically taking the Button.Position.Y.Scale and increasing it by 0.01 in the tween. Since Reverse is enabled, the tween will reverse and the button will go back to what it was.

Here’s a .rbxl of it for reference, if you hit Play you can test it out for yourself and mess around with tween settings. buttonEffect.rbxl (16.4 KB)

You should probably add a debounce to the button click event

5 Likes