Button animation

Help and Feedback Scripting Support
#1

Hello. I was just wondering how to make this button animation: image image
It has a smooth transition. The images are taken from saber simulator: [20,000X] Saber Simulator - Roblox
Thanks!

2 Likes
#2

You could use the guiobject.MouseEnter event. Then use UDIM2 to make the GUI expand slightly. Then use the MouseLeave event and make the GUI shrink again. You could try doing:

GUI.MouseEnter:Connect(function()
    GUI.Size = UDim2.new(GUI.Size.X.Scale, GUI.Size.X.Offset + 5, GUI.Size.Y.Scale, GUI.Size.Y.Offset + 5)
end)
GUI.MouseLeave:Connect(function()
    GUI.Size = UDim2.new(GUI.Size.X.Scale, GUI.Size.X.Offset - 5, GUI.Size.Y.Scale, GUI.Size.Y.Offset - 5)
end)
5 Likes
#3

Since I am not a scripter, what do I do with this? I can kind of understand that when you hover over it then it scales it bigger then when the mouse is not on it, it goes back to the original size.

#4

Basically, you need to define the “GUI” variable as the button you want to have do this animation.
Then it’s basically copy paste from there.

#5

I tried changing GUI to ImageButton but it does not work.

#6

We’re there any errors when you ran it?

#7

I tween my guis. You don’t even need tween service.

https://developer.roblox.com/en-us/articles/GUI-Animations

#8

If you don’t how how to use the code and don’t know how to interact with the elements, I’d recommend you learn basic lua before asking these questions.

Here are some articles from the Developer Hub that can help:

#9

What I personally do is tween it, here’s an example:

script.Parent.MouseEnter:Connect(function()
script.Parent:TweenPosition(UDim2.new(0,0, 0,0), “Out”, “Change this”, Change this, true)
end)

True makes it so if someone moves the mouse away while the animation is playing it will go back to where it’s old position was

#10

There weren’t any. I changed the GUI to ImageButton and it still did not work.

How would I make a gui animation similar to this
#11

Oh, see what you mean. You could make a variable called GUI. What you should do is copy my code from above, and then at the very beginning, before all the code, type:

local plr = game.Players.LocalPlayer
local GUI = plr.PlayerGui.ImageButton

In the GUI variable, change imagebutton to whatever the GUI is called. Also, make sure it’s in a local script.

3 Likes