Issue with animating an UI (tween)

Help and Feedback Scripting Support
, ,
#1

I would like to make an UI animation.
Basically, it would go from the outside of the screen to the desired position.

The issue is that it doesn’t really work, I used to be able to open and close it properly, but when I tried to animate it, the animation does not show and by default the UI is open. (and unable to close it)

I have tried to change several things but it still did not work, help would be appreciated :smiley:

Here’s the code:

local ScreenGui = script.Parent
local Frame = script.Parent.MainFrame
local OpenButton = script.Parent.OpenButton
local CloseButton = Frame.CloseButton
local TweenService = game:GetService("TweenService")
local TweenInfo = TweenInfo.new(0, Enum.EasingStyle.Out, Enum.EasingDirection.Quad)
local OpenAnimation = TweenService:Create(Frame, TweenInfo, {Position = UDim2.new(0.225, 0, 0.052, 0)})


Frame.Visible = false
Frame.Position = UDim2.new(-2, 0, 0.052, 0)

OpenButton.MouseButton1Click:Connect(function()
	Frame.Visible = true
	print("Frame open")
	OpenAnimation:Play()
end)

CloseButton.MouseButton1Click:Connect(function()
	Frame.Visible = false
	print("Frame closed")
end)
#2

Just make a close animation and play it when you close the frame.

local ScreenGui = script.Parent
local Frame = script.Parent.MainFrame
local OpenButton = script.Parent.OpenButton
local CloseButton = Frame.CloseButton
local TweenService = game:GetService("TweenService")
local TweenInfo = TweenInfo.new(0, Enum.EasingStyle.Out, Enum.EasingDirection.Quad)
local OpenAnimation = TweenService:Create(Frame, TweenInfo, {Position = UDim2.new(0.225, 0, 0.052, 0)})
local CloseAnimation = TweenService:Create(Frame, TweenInfo, {Position = UDim2.new(-2, 0, 0.052, 0)})

Frame.Visible = false
Frame.Position = UDim2.new(-2, 0, 0.052, 0)

OpenButton.MouseButton1Click:Connect(function()
	Frame.Visible = true
	print("Frame open")
	OpenAnimation:Play()
end)

CloseButton.MouseButton1Click:Connect(function()
	print("Frame closed")
    CloseAnimation:Play()
    CloseAnimation.Completed:Wait()
    Frame.Visible = false
end)
#3

It did not work, I tried to utilize the exact same thing you’ve just said but the same happens.

#4

Did you change the CloseButton.MouseButton1Click event?

CloseButton.MouseButton1Click:Connect(function()
	print("Frame closed")
    CloseAnimation:Play()
    CloseAnimation.Completed:Wait()
    Frame.Visible = false
end)
#5

Mhm, I did. It does not work though.

#6

Seems odd.

1 Like
#7

Where is the script located?

#8

Try

local ScreenGui = script.Parent
local Frame = script.Parent.MainFrame
local OpenButton = script.Parent.OpenButton
local CloseButton = Frame.CloseButton
local TweenService = game:GetService("TweenService")

local openTweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Quad, Enum.EasingDirection.Out)
local closeTweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Quad, Enum.EasingDirection.In)

local closedPosition = UDim2.new(-1, 0, 0.052, 0)
local openPosition = UDim2.new(0.225, 0, 0.052, 0)

local openTween = TweenService:Create(Frame, openTweenInfo, {Position = openPosition})
local closeTween = TweenService:Create(Frame, closeTweenInfo, {Position = closedPosition})

Frame.Position = closedPosition 
Frame.Visible = false

OpenButton.MouseButton1Click:Connect(function()
    Frame.Visible = true
    print("Frame open")
    openTween:Play()
end)

CloseButton.MouseButton1Click:Connect(function()
    print("Frame closed")
    closeTween:Play()
    closeTween.Completed:Connect(function() 
        Frame.Visible = false
    end)
end)
1 Like
#9

You switched EasingStyle and EasingDirection. The EasingStyle should be Quad and the EasingDirection should be Out.

1 Like
#10

It’s a local script whose parent is the ScreenGui where the Frame is located.

ScreenGui

  • Local Script
  • Frame
    • Buttons, etc
  • Etc
    I am not on my PC right now though, I’ll confirm it later. Nevertheless, if I don’t edit this, you can assume it’s like this
#11

Oh, there was an error with the TweenInfo, just change it to what @AlexPalex178 said.

#12

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