How to make a GUI close/open on the same button using a tween?

Help and Feedback Scripting Support
,
#1

Hi! Recently I started making a GUI for people to buy and equip items in my game, and I need some help. I’m a beginner at scripting and haven’t experienced much.

Basically my goal is to make the shop gui come on screen when you press it, then go back when you press it again. Here is what I managed to do: https://gyazo.com/6362c5826116c5662dbde88fcd9759e7

Basically, it can tween to go on screen, but I don’t know how to make it go off screen with a tween if you click the same button. Here is the script for the whole GUI:

local Shop = script.Parent.Shop
local ItemsToggle = script.Parent.ItemsToggle
local ItemsMinimize = ItemsToggle.ItemsMinimize

ItemsToggle.MouseButton1Up:Connect(function()
	Shop:TweenPosition(
		UDim2.new(0.224,0 ,0.075, 0), --EndPosition
		"Out", --Easingirection
		"Quad", --EasingStyle
		0.6, --Time
		true, --Override
		nil --Function
		)
end)

ItemsMinimize.MouseEnter:Connect(function()
	ItemsToggle:TweenPosition(
		UDim2.new(0, 0,0.452, 0), --EndPosition
		"Out", --Easingirection
		"Quad", --EasingStyle
		0.6, --Time
		true, --Override
		nil --Function
		)
end)

ItemsToggle.MouseLeave:Connect(function()
	ItemsToggle:TweenPosition(
		UDim2.new(-0.125, 0,0.452, 0), --EndPosition
		"Out", --Easingirection
		"Quad", --EasingStyle
		0.6, --Time
		true, --Override
		nil --Function
		)
end)

How can I make it so I can close the GUI by pressing the same button? I tried using an if statement but it gave me errors, and I don’t think I can use not because I don’t want to change only the Visible property. Any help is very appreciated! Oh, and this is my first devforum post.

#2

From what I understand, try the following:

local button = script.Parent -- path to the button

local clicked = false -- bool variable for if the button has been clicked

local function onOpen()
    -- code here for the tween you want to play for the frame to pop up
end

local function onClose()
    -- code here for the tween you want to play for the frame to close
end

button.MouseButton1Click:Connect(function()
    if clicked == false then -- since it's false by default, this will run when the player opens the gui
        onOpen() -- running the function for when the gui opens
        clicked = true -- setting the variable to true so next time the player clicks on it, the onClose() function will run
    elseif clicked == true then
        onClose() -- running the function for when the gui closes
        clicked = false -- setting the variable back to false since the player has now closed it; the gui can be opened again
    end
end)

Let me know if you have any questions or if the code doesn’t work (I made it up on the spot). Hopefully this helped! :happy1:

5 Likes
#3

I just check the Visible property on the Frame to see whether its Open or Closed:

-- VARIABLES
local button = script.Parent
local frame = game.Players.LocalPlayer.PlayerGui.ScreenGui.Frame


-- FLUSH FUNCTION
button.Activated:Connect(function()
	if frame .Visible == true then
		-- INSERT YOUR TWEEN OUT HERE
		frame .Visible = false
	else
		frame .Visible = true
		-- INSERT YOUR TWEEN IN HERE
	end
end)
1 Like
#4

You’d usually want to set up a boolean which will be checked if either false or true. If true, GUI will be closed. If false, GUI will be opened. For example.

local opened = false; --boolean

script.Parent.MouseButton1Click:Connect(function(plr)
    if not opened then --check if opened boolean is true or false
        --do stuff to open gui
    else
        --do stuff to close gui
    end
end)

In order to summarise the coding in a few words, this is basically the equivalent of: If opened is true, then open the GUI. If it’s anything else, close the GUI.

2 Likes
#5

It worked! Thank you very much, have a nice day :smiley:

2 Likes