UI Tween Opening Help

Help and Feedback Scripting Support
#1

Hello Devs,
I was making animations for my game’s UI, but I’ve run into a “problem”, not necessarily a script breaking problem, but still annoying.

When I double click or click fast on the button to open the menu and then close again quickly, I get what I want, everything is good and smooth. But, if i do the same and try to close and reopen the menu, it just doesn’t.

Here’s a video showing my problem:


(I hope you understand whats happening)

And here’s my script:

local button = script.Parent
local frame = script.Parent.Parent.Parent.test
local ts = game:GetService("TweenService")

local function createTween(object, properties, duration, easingStyle, easingDirection, delaY)
	local tweenInfo = TweenInfo.new(duration, Enum.EasingStyle[easingStyle], Enum.EasingDirection[easingDirection], 0, false, delaY)
	local tween = ts:Create(object, tweenInfo, properties)
	return tween
end

button.MouseButton1Click:Connect(function()
	if frame.Visible == false then
		local uiTweenOpen = createTween(frame, {Position = UDim2.new(0.396, 0,0.315, 0), BackgroundTransparency = 0}, 0.25, "Quad", "Out", 0)
		frame.Visible = true
		uiTweenOpen:Play()
	else
		local uiTweenClose = createTween(frame, {Position = UDim2.new(0.396, 0,0.351, 0), BackgroundTransparency = 1}, 0.25, "Quad", "Out", 0)
		uiTweenClose:Play()
		task.wait(.25)
		frame.Visible = false
	end
end)

I think the problem is the “task.wait(.25)” but I’m not sure
I’d be happy if someone could help me

1 Like
#2

You are correct. In the first scenario where frame is not visible when you press the button, its Visible property is instantly set to true, so when you press the button again very quickly you can instantly close it. However when frame is visible you wait 0.25s to finish the animation before making the frame not visible, so if you press the button within those 0.25s the script still thinks the frame is opened, so it will just keep closing it.
You would have to have a variable holding the state of the frame which you will update instantly on button press. You can also give the frame an attribute for its open/closed state.

#3

Hmm, do you mean like local frameOpen = false?
How could I implement that? using the if statement?

#4

On button press you would just:

frameOpen = not frameOpen --this will flip the state

if frameOpen then
    frame.Visible = true
    --play opening animation
else
    --play closing animation
    task.wait(.25) --your wait
    if not frameOpen then --hide the frame only if you didnt press the button again
        frame.Visible = false 
    end
end
#5

I tried that, but it only opens the menu, doesn’t close it

Code right now:

local button = script.Parent
local frame = script.Parent.Parent.Parent.test
local ts = game:GetService("TweenService")
local frameOpen = false
frameOpen = not frameOpen

local function createTween(object, properties, duration, easingStyle, easingDirection, delaY)
	local tweenInfo = TweenInfo.new(duration, Enum.EasingStyle[easingStyle], Enum.EasingDirection[easingDirection], 0, false, delaY)
	local tween = ts:Create(object, tweenInfo, properties)
	return tween
end

button.MouseButton1Click:Connect(function()
	if frameOpen then
		local uiTweenOpen = createTween(frame, {Position = UDim2.new(0.5, 0,0.5, 0), BackgroundTransparency = 0, Size = UDim2.new(0.209, 0,0.37, 0)}, 0.25, "Quad", "Out", 0)
		frame.Visible = true
		uiTweenOpen:Play()
	else
		local uiTweenClose = createTween(frame, {Position = UDim2.new(0.5, 0,0.55, 0), BackgroundTransparency = 1, Size = UDim2.new(0.191, 0,0.348, 0)}, 0.25, "Quad", "Out", 0)
		uiTweenClose:Play()
		task.wait(.25)
			if not frameOpen then
				frame.Visible = false
			end
	end
end)
#6

frameOpen = not frameOpen flips the boolean value, so lets say frameOpen is false when you do frameOpen = not frameOpen now frameOpen will be true, so you have to do that every time you press the button to keep changing its value.

#7

oh, so do I have to move the frameOpen = not frameOpen inside the if statements?
Or inside the MouseButton1Click function?

#8

Not inside the if statements but inside of the MouseButton1Click function, right before the if statement, the if statement checks if frameOpen is true so you are changing the value right before the if statement so every time you press the button it will always do a different action (opening/closing).

#9

Yay, it works now. I don’t know how I didn’t think of that earlier.
Thank you for helping :+1:

#10

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