How to make an Animation on buttons?

Help and Feedback Art Design Support
#1

Hi, I want to learn how to make a button animation when the cursor is above the button.

Its hard to explain what I mean but example on a menu when the cursor is above the button, the button has an animation to move forward and when the cursor is not on the button it goes back to normal position.

I don’t know if their is a name to it.

Would be helpful to teach me how to do it with scripts or YouTube tutorials.

Thanks.

1 Like
#3

Here’s a code sample I wrote which should cover what you’re trying to do. The size and tween info is obviously for you to adjust and customize to fit for your own GUI. I attached some links which can help you better understand these mechanics for future reference.

local btn = script.Parent --GUI Object

local function increase()
	btn:TweenSize(UDim2.fromScale(0.115,0.179), --Size
		Enum.EasingDirection.Out, --Easing Direction
		Enum.EasingStyle.Linear, --Easing Style
		0.2 --Time
	)
end

local function decrease()
	btn:TweenSize(UDim2.fromScale(0.102,0.158), --Size
		Enum.EasingDirection.In, --Easing Direction
		Enum.EasingStyle.Linear, --Easing Style
		0.2 --Time
	)
end

btn.MouseEnter:Connect(increase) --Increase size when hovering over GUI object
btn.MouseLeave:Connect(decrease) --Decrease size when no longer hovering over GUI object```
1 Like
#4

Thank you so much. Just one thing. The 1st time you hover it it makes a different movement and the others are normal? Is this normal?

Video Link:
https://files.fm/f/wkggs6jgn

#5

From what I’m seeing it may be due to using UDim2.fromScale, and your GUI may be using offset. One thing I forgot to mention is using anchor points. The sample I provided used an anchor point of 0.5, 0.5, which scales the object from the center. If you copy and pasted my code, make sure to change the size values from mine to correspond with your GUI. (Copy and paste the default size into the decrease function, then copy and paste the size of your larger GUI into the increase function. Make sure to use scale/offset correctly!)