Need help with tweening gui

Help and Feedback Scripting Support
#1

Not sure how to explain this so sorry if it’s confusing. I have this tween for opening the dialogue box and it opens with the right going going out towards the right side, but when it closes I want the left side to go in towards the right side

Here’s how it looks right now

And here’s the code

Dialogue.OnClientEvent:Connect(function()
	DialogueBox.Position = UDim2.new(0.285,0,0.767,-30)
	DialogueBox.Size = UDim2.new(0.006,0,0.233,0)
	DialogueBox.Visible = true
	DialogueBox:TweenSize(UDim2.new(0.429,0,0.233,0),Enum.EasingDirection.Out,Enum.EasingStyle.Sine,0.5,true)	
	wait(3)
	DialogueBox:TweenSize(UDim2.new((0.004,0,0.233,0),Enum.EasingDirection.Out,Enum.EasingStyle.Sine,0.5,true)	
	--DialogueBox.Visible = false
end)
3 Likes
#2

After the wait, make the dialog box tween towards the right by making its size go towards the right side.

#3

Well I’ve been trying, but can’t seem to figure out how to do it I’ve tried adjusting the numbers, but it still isn’t tweening the way I want it to.

#4

if you use real tweens, there is a part of tween info that allows the tween to be reversed after it’s done.

#5
1 Like
#6

I am pretty sure you can utilize the Rotation Property of the GUI to reverse the Tween’s direction.
Set it to 180 degrees right before the tween, and when the Tween is over, set it to 0 again.

@AC_Starmarine I am pretty sure that'll just make it close to the right again.

It just means it is going to undo itself:
Right → Left (Opening tween)
Left - > Right (Reverse tween).
@OP wants to achieve this:
Right → Left(Opening tween)
Right → Left (Closing Tween)

#7

That’s a hacky solution. What @AC_Starmarine is saying is correct.

A really easy way to do it is to first manually scale and position the UI to exactly where you want it to go, then apply that size and position to your tween.

Here is how I would personally approach this problem:

  1. Put the dialog GUI inside of a Frame. The Frame will act as the position and size of the dialog when its open
  2. Set the dialog size to 0, 0, 1, 0 and position it to 0, 0, 0, 0 (Closed state).
  3. When opening the dialog, tween the size to 1, 0, 1, 0 and leave the position at 0, 0, 0, 0
  4. When closing the dialog, tween the size back to 0, 0, 1, 0, but this time position it at 1, 0, 0, 0

This would give the effect that its opening from left to right, but then also closes from left to right. GUI’s have 2 vectors for size and position, X and Y (Udim2), the first number of one axis is always scale, the second always offset. (XScale, XOffset, YScale, YOffset). Scale is a percent in decimals, 0.5 scale will take up 50% of its parent. Offset is in pixels, setting offset to 500 is the equivalent to 500 pixels (This is important since 500 pixels will appear much larger/smaller depending on your monitors resolution).

1 Like