Help With GUI Tweening

Help and Feedback Scripting Support
,
#1

Hey! I’m trying to make a menu GUI where you can navigate through a few different subGUIs. I got that far, but now that I’m trying to make it pretty with tweening I am running into trouble.

As an example of what I’m trying to accomple, say I click on “LEVEL UP”

RobloxScreenShot20220621_123518864
RobloxScreenShot20220621_1235188641920×688 47 KB

I want that to make the level up GUI visible:

RobloxScreenShot20220621_123750492
RobloxScreenShot20220621_1237504921920×688 56.1 KB

and then tween out to the proper position:

RobloxScreenShot20220621_123500250
RobloxScreenShot20220621_1235002501920×688 64.5 KB

Here’s the code I wrote trying to achieve this:

LvlUpButton.MouseButton1Click:Connect(function()
	
	print("1st")
	
	if mainFrame.Position == UDim2.new(0.298, 0, 0.223, 0) then
		
		print("2nd")
		
		mainFrame.Visible = true
		mainFrame:TweenPosition(UDim2.new(0.436, 0, 0.223, 0),Enum.EasingDirection.InOut,Enum.EasingStyle.Sine,1)
		
		
	elseif mainFrame.Position == UDim2.new(0.436, 0, 0.223, 0) then
		
		print("3rd")
		
		mainFrame:TweenPosition(UDim2.new(0.298, 0, 0.223, 0),Enum.EasingDirection.InOut,Enum.EasingStyle.Sine,1)
		mainFrame.Visible = false
		
	end
end)

with mainFrame being the LevelUpGUI. This is in a local script under a general screenGUI that encompasses everything on the screen. For some reason this only prints “1st” and gets no further. I have double checked that the frame is in the right initial position (0.298,0,0.223,0) but no luck.

I’m still very new to coding (this is my first game :grin:) so it’s very likely that this will just be something simple that I overlooked. Let me know if you need to see anything else!

Thanks for any help!

#2

do any errors pop up? instead of picture-perfecting the statement, you can use debounce instead

local debounce = false
LvlUpButton.MouseButton1Click:Connect(function()
	
	print("1st")
	
	if not debounce then
		debounce = true
		print("2nd")
		
		mainFrame.Visible = true
		mainFrame:TweenPosition(UDim2.new(0.436, 0, 0.223, 0),Enum.EasingDirection.InOut,Enum.EasingStyle.Sine,1)

		
		
	else
		debounce = false
		print("3rd")
		
		mainFrame:TweenPosition(UDim2.new(0.298, 0, 0.223, 0),Enum.EasingDirection.InOut,Enum.EasingStyle.Sine,1)
		mainFrame.Visible = false
		
	end
end)
1 Like
#3 
-- Services
local TweenService = game:GetService("TweenService")

-- Settings for tween
local TimeToTween = 5
local EasingDirection = Enum.EasingDirection.Out
local EasingStyle = Enum.EasingStyle.Linear

-- TweenInfo using the settings ^
local Tweeninfo = TweenInfo.new(TimeToTween, EasingStyle, EasingDirection)

local Open = false

local OpenTween = TweenService:Create(mainFrame, Tweeninfo, {Visible = true, Position = UDim2.fromScale(0.436, 0.223)})
local CloseTween = TweenService:Create(mainFrame,Tweeninfo,{Position = UDim2.fromScale(0.298, 0.223), Visible = false})

LvlUpButton.Activated:Connect(function()
   if Open then
      CloseTween:Play()
      Open = false
   else
      OpenTween:Play()
      Open = true
   end
end)

I think using TweenService is much better, here’s a script I made which should work for you!

2 Likes
#4

This almost worked! For some reason I couldn’t get it to reach “3rd”. It would tween out on the first click and then not work after that.

Also no, I don’t get any errors :frowning_face:. It’s the worst because I have no idea how to fix it lol.

#5

Awesome!! This did it perfectly. Thanks a ton!

1 Like