Button animation not working

Help and Feedback Scripting Support
1

I’ve been working on making my Backrooms game’s menu better and decided to give the UI some animations (Buttons growing larger when you hover over them, menus sliding up when they open, that sort of thing.) and I made this script to make a button grow to 1.25x its size when you hover over it.

local button = script.Parent
local size = script.Parent.Size
local pos = script.Parent.Position

defaultSize = {{0.13, 0},{0.55, 0}}
defaultPos = {{0.43, 0},{0.51, 0}}

local function hover()
	button.MouseEnter:Connect(function()
		size = {{0.1625, 0},{0.6875, 0}}
	end)
	button.MouseLeave:Connect(function()
		size = defaultSize
		pos = defaultPos
	end)
end

hover()

When I playtest it it does nothing. I tried putting the functions in a while loop however that makes the game completely unplayable from lag. Does anyone know what I did wrong?

2

Try using UDim2.new() for the size, default size and default position

3

Hello, I see where the problem is. It is a bit hard to explain but I will try my best.

When you do :

You are retrieving the size and the position of the button and saving them in the variables size and pos.

So the variables size and pos are both UDim2, which is the “unit” for the GUIs Items.

IMPORTANT!
size and pos are not the size and the position properties, so changing them will only change the variables.

First of all, you need to replace all the things like this :

to a UDim2 , here is an example :

defaultSize = UDim2.new(0.13,0,0.55,0) -- Instead of {{0.13, 0},{0.55, 0}}

You can also do that :

defaultSize = size

--or even that

local button = script.Parent
local defaultSize = script.Parent.Size
local defaultPos = script.Parent.Position
-- If you are using this, you don't need "size" and "pos" anymore.

because, as I said earlier, you retrieve the size and the position.

Secondly, to modify the size and the position, you need to change the property, here is how you do it:

local function hover()
	button.MouseEnter:Connect(function()
		button.Size = UDim2.new(0.1625, 0,0.6875, 0)
	end)
	--...
end

I hope you understood, if you have any questions, don’t hesitate to ask me!

4

My script is now this:

local button = script.Parent
local size = script.Parent.Size
local pos = script.Parent.Position

tweenService = game.TweenService
duration = TweenInfo.new(0.15)
tween1 = {Size = UDim2.new(0.1625, 0, 0.6875, 0), Position = UDim2.new(0.4125, 0, 0.51, 0)}
tween2 = {Size = defaultSize, Position = defaultPos}
local tweenBig = tweenService:Create(button, duration, tween1)
local tweenSmall = tweenService:Create(button, duration, tween2)

defaultSize = UDim2.new(0.13, 0 ,0.55, 0)
defaultPos = UDim2.new(0.43, 0, 0.51, 0)

local function hover()
	button.MouseEnter:Connect(function()
		tweenBig:Play()
	end)
	button.MouseLeave:Connect(function()
		tweenSmall:Play()
	end)
end

hover()

It works fine at making the button bigger however when I move my mouse away it doesn’t get smaller again.

5

Try putting default variables before the tween1 variable

6

I think there’s a better way to add animations to a button without creating any lag. I have edited your script and it should change sizes.

– Variables
local Button = script.Parent

local StartSize = UDim2.new(0.1625, 0, 0.6875, 0)
local HoverSize = UDim2.new(0.4125, 0, 0.51, 0)

Button.MouseEnter:Connect(function()
Button:TweenSize(HoverSize,
Enum.EasingDirection.Out, – Direction
Enum.EasingStyle.Quad, – Style
0.15, – Duration
true)

end)

Button.MouseLeave:Connect(function()
Button:TweenSize(StartSize,
Enum.EasingDirection.Out, – Direction
Enum.EasingStyle.Quad, – Style
0.15, – Duration
true)
end)

7

Here is a more organized and fixed script.

local button = script.Parent
local defaultSize = UDim2.new(0.13, 0, 0.55, 0)
local hoverSize = UDim2.new(0.1625, 0, 0.6875, 0)
local defaultPos = UDim2.new(0.43, 0, 0.51, 0)

local function applyTween(property, endValue, duration, easingDirection, easingStyle)
    local tweenInfo = TweenInfo.new(duration, easingStyle, easingDirection)
    local tween = game:GetService("TweenService"):Create(button, tweenInfo, {[property] = endValue})
    tween:Play()
end

local function hover()
    button.MouseEnter:Connect(function()
        applyTween("Size", hoverSize, 0.3, Enum.EasingDirection.Out, Enum.EasingStyle.Quad)
    end)

    button.MouseLeave:Connect(function()
        applyTween("Size", defaultSize, 0.3, Enum.EasingDirection.Out, Enum.EasingStyle.Quad)
        applyTween("Position", defaultPos, 0.3, Enum.EasingDirection.Out, Enum.EasingStyle.Quad)
    end)
end

hover()
8

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.