How do I make a Tween on my GUI? Please help [Done]

I am trying to create a Tween for my shop gui, ive tried watching a couple of tutorials but none of them worked. I want to make it so when you click it, it comes goes from small to big. Heres an example:

Please help

1 Like

To achieve a similar effect as described in the video, take a look at following Properties/Methods:

GuiObject AnchorPoints
GuiObject :TweenSize()

With these two, you can re-create the effect in the video.

1 Like

Thank you, Ill try that out and see if it works.

I tried following the steps for the Tween, but it still didnt work.

No Problem! I will assist you.

Let’s assume you have a Frame you want to tween in/out.
First, set the AnchorPoints of Frame. We want it to go out from the center, so we set it to the center. In this case, X = 0.5 and Y = 0.5

In Studio, it should show “AnchorPoint = 0.5, 0.5”

Now, we can use the :TweenSize() method to Size the GUI Element.
Here is a code example:

local myFrame = (PathToYourFrame)
local frameSize = UDim2.new(1, 0, 1, 0) --// Change this to whatever value you want.
myFrame:TweenSize(frameSize) --// You can add additional parameters based on the links I gave you.

This should give you the desired effect!
If you want to close/open the GUI, you can create two functions and call them with a button.
Like this:

local myFrame = (PathToYourFrame)
local button = (PathToYourButton)
local frameSizeOpen = UDim2.new(1, 0, 1, 0)
local frameSizeClosed = UDim2.new(0, 0, 0, 0)
local isFrameOpen = false

function openGUI()
    myFrame:TweenSize(frameSizeOpen)
    isFrameOpen = true
end

function closeGUI()
    myFrame:TweenSize(frameSizeClosed)
    isFrameOpen = false
end

button.MouseButton1Click:Connect(function()
    if isFrameOpen then closeGUI() else openGUI() end
end)
1 Like

Alright so, I adjusted the script so it would fit with my button name and my frame name (ShopButton & ShopFrame) but after testing, the tween animation does not seem to work. Did I do something wrong? If I did, please forgive me as my knowledge of scripting is very limited. Here is the my adjusted code that I used:

local myFrame = script.Parent.ShopFrame
local button = script.Parent.ShopButton

local frameSizeOpen = UDim2.new(1, 0, 1, 0)
local frameSizeClosed = UDim2.new(0, 0, 0, 0)
local isFrameOpen = false

function openGUI()
myFrame:TweenSize(frameSizeOpen)
isFrameOpen = true
end

function closeGUI()
myFrame:TweenSize(frameSizeClosed)
isFrameOpen = false
end

button.MouseButton1Click:Connect(function()
if isFrameOpen then closeGUI() else openGUI() end
end)

No problem! Do you get any errors in the output? If so, please share them here.
If not, try adding a print() statement to the button.MouseButton1Click to see if the button press is being registered, like so:

button.MouseButton1Click:Connect(function()
    print("The button was pressed!")
    if isFrameOpen then closeGUI() else openGUI() end
end)

Share the results here!

I adjusted the script and added if the print statement, and I didn’t get anything in the output. here is the script that I used:

local myFrame = script.Parent.ShopFrame
local button = script.Parent.ShopButton

local frameSizeOpen = UDim2.new(1, 0, 1, 0)
local frameSizeClosed = UDim2.new(0, 0, 0, 0)
local isFrameOpen = false

function openGUI()
myFrame:TweenSize(frameSizeOpen)
isFrameOpen = true
end

function closeGUI()
myFrame:TweenSize(frameSizeClosed)
isFrameOpen = false
end

button.MouseButton1Click:Connect(function()
print(“The button was pressed!”)
if isFrameOpen then
closeGUI()
else
openGUI()
end
end)

Okay, that indicates that the code is not registering any clicks.

Can you add print(button.ClassName) to your code? That way we can check if the button is properly defined and if it’s a ImageButton/TextButton.

Like so:

local button = script.Parent.ShopButton
print(button.ClassName)

I was just about to log onto studio until I found out that Roblox is done again lol.
Ill make sure to try it out when Roblox is back up.
Thanks for your help so far, it means a lot :slightly_smiling_face:

1 Like

Alright, so I added the print into the script, but when I clicked on the button, i still dont get anything from output.


Here is the script that I used:

local myFrame = script.Parent.ShopFrame
local button = script.Parent.ShopButton

local frameSizeOpen = UDim2.new(1, 0, 1, 0)
local frameSizeClosed = UDim2.new(0, 0, 0, 0)
local isFrameOpen = false

function openGUI()
myFrame:TweenSize(frameSizeOpen)
isFrameOpen = true
end

function closeGUI()
myFrame:TweenSize(frameSizeClosed)
isFrameOpen = false
end

button.MouseButton1Click:Connect(function()
print(“The button was pressed!”)
if isFrameOpen then
closeGUI()
else
openGUI()
end
end)

local button = script.Parent.ShopButton
print(button.ClassName)

Ah, I might see what the issue is.
Try the following code, I have added some parameters to the :TweenSize() method.

local myFrame = script.Parent.ShopFrame
local button = script.Parent.ShopButton
local frameSizeOpen = UDim2.new(1, 0, 1, 0)
local frameSizeClosed = UDim2.new(0, 0, 0, 0)
local isFrameOpen = false

function openGUI()
    myFrame:TweenSize(frameSizeOpen, Enum.EasingDirection.Out, Enum.EasingStyle.Quad, 1)
    isFrameOpen = true
end

function closeGUI()
    myFrame:TweenSize(frameSizeClosed, Enum.EasingDirection.In, Enum.EasingStyle.Quad, 1)
    isFrameOpen = false
end

button.MouseButton1Click:Connect(function()
    if isFrameOpen then closeGUI() else openGUI() end
end)
1 Like

Roblox is currently down and experiencing lots of issues so some services might not function properly

I used that script, but it’s still not working. I can’t seem to find what the issue is. I took a recording of whats happening:
(I had to use a link because my file was larger than 10 megabytes)

Thank you so much for all your help so far, I appreciate it a ton :grin:

That’s weird, are you sure you put in the correct LocalScript? Also, is there possibly a different LocalScript interfering with the Frame/Button?

If I test the code in Studio, it works fine for me.

If you can, send a screenshot of your Explorer with the GuiObjects & LocalScript.

Someone else was able to help me with the tween gui, thank you so much for the time you spent trying to help me, I really do appreciate it :blush:

1 Like