UI Tweening issues

Hello,

So basically, I was thinking if there was any ways to go about doing this (see video)

https://gyazo.com/00bd3189a5ddf2ce83bac912f36e7251

Basically the little yellow line moves to whatever button you click, but I get the issue where the button almost teleports back to the Home button before it goes to the shop button. So if I’m going to the info button to the shop button it goes

Info button clicked -> Home button -> Shop button

How can I get it just to go

Info button clicked -> shop button

I know there is probably a way to do this, just not sure how. I was considering setting the yellow line position to the current position it’s in when the tween ends but that didn’t work because it included a { and a } in the position.

In conclusion, I would like the lower line to work like this

Yellow line is on home button, shop button clicked -> yellow line goes under shop button, Info button clicked -> yellow line goes under info button -> shop button clicked, yellow line goes under shop button, etc.

Thanks

Can you post your script so we can better help you?

Sure, sorry I forgot to include it. This is part of the script (bit long my apologies)

Code
Q_B.MouseButton1Click:Connect(function()
	Obj_Twn.AnchorPoint = Vector2.new(0, 0)
	Obj_Twn.Position = UDim2.new(0.275, 0,0.158, 0)
	Obj_Twn:TweenPosition(UDim2.new(0.641, 0,0.157, 0))
	game.Players.LocalPlayer:Kick("Quit game.")
end)

H_F.MouseButton1Click:Connect(function()
	Obj_Twn.AnchorPoint = Vector2.new(0, 0)
	Obj_Twn.Position = UDim2.new(0.404, 0,0.158, 0)
	Obj_Twn:TweenPosition(UDim2.new(0.275, 0,0.158, 0))
end)
S_B.MouseButton1Click:Connect(function()
	Obj_Twn.AnchorPoint = Vector2.new(0, 0)
	Obj_Twn.Position = UDim2.new(0.275, 0,0.158, 0)
	Obj_Twn:TweenPosition(UDim2.new(0.404, 0,0.158, 0))
end)

I_B.MouseButton1Click:Connect(function()
	Obj_Twn.AnchorPoint = Vector2.new(0, 0)
	Obj_Twn.Position = UDim2.new(0.404, 0,0.158, 0)
	Obj_Twn:TweenPosition(UDim2.new(0.518, 0,0.157, 0))
end)

Q_B being quit button, H_F being Home Button, I_B is info button and S_B is shop button

Why are you setting the object’s position before tweening?

Because without it, the yellow line starts up in the top corner as the way the tween works is it needs a previous position in order to tween to a new position, the object’s position is the previous position, and then there is the new position underneath it. Without it, it just comes in from the top left as it has no previous position set.

It should be tweening from its previous position. Where is the line by default?

It’s default position is the home button as that’s the frame the player will always join on.

It should not be touching the top corner then. Can you remove the line before tweening and send a video of what happens?

Oh, so for some reason I removed it now works. Thanks for that, stupid mistake on my side.

1 Like

Ah, I had tried that before, I realised the reason it went into the corner was because I accidentally tagged out one of the tween positions instead of the object positions.