Have not been able to figure out how to tween position / size in guis?

I’ve been searching everywhere about how to tween position and size but I have had no luck. If you could help me out by giving me some sample text or editing my script to work here is my script

	if EnteredKey == Key then
		 KeyBox.Text = "Acess Granted" 
		 wait(1)
		 Db = false KeyBox:Destroy() SubmitButton:Destroy() end

I want to animate when the key is correct. Thanks.

When it comes to GUI's, their position and size values are now UDim2 values. This consists of 4 values. (X, XOffset, Y, YOffset). Basically, if your values are set to X and Y then the number you put in is basically the percent of the entire resolution. An example would be say I wanted 50 pixels of a 1080x1920. the 1080 would be X and you wanted x to be 50. What you would do is divide 50 by 1080. (0.04629629629). Anyway it would be 0.04*100 = 4% of the screen.

Moving on, now you know about the values you want to make sure you know exactly what size and position you want the GUI to tween to.

Example: Frame:TweenSize(UDim2.new(1,0,1,0), 'In', 'Linear', 1, true) There are a couple arguments. First one being the UDim value (In this case it will fill the screen because 1*100 = 100%). The second argument is direction based and the third is the tweening style. The number is the amount of time it will take to tween and the last argument is if this tween can be overlapped or not.

For more information on TweeningStyles google: Roblox TweeningStyles

Lastly if you want to tween position just change TweenSize to TweenPosition.

If you need any more assistance comment below.

PS: You can also search up Roblox TweenPosition or Roblox TweenSize for more examples.

Roblox Uses

UDim2

For Gui Animations. Animate with UDim2. What you can do (Code from roblox developer hub). :

1.  local RunService =  game:GetService("RunService")

3.  -- How fast the frame ought to move
4.  local SPEED =  2

6.  local frame =  script.Parent
7.  frame.AnchorPoint =  Vector2.new(.5,  .5)

9.  -- A simple parametric equation of a circle
10.  -- centered at (0.5, 0.5) with radius (0.5)
11.  local  function circle(t)
12.  return  .5  +  math.cos(t)  *  .5,
13.  .5  +  math.sin(t)  *  .5
14.  end

16.  -- Keep track of the current time
17.  local currentTime =  0
18.  local  function onRenderStep(deltaTime)
19.  -- Update the current time
20.  currentTime = currentTime + deltaTime * SPEED
21.  -- ...and our frame's position
22.  local x, y = circle(currentTime)
23.  frame.Position =  UDim2.new(x,  0, y,  0)
24.  end

26.  -- This is just a visual effect, so use the "Last" priority
27.  RunService:BindToRenderStep("FrameCircle",  Enum.RenderPriority.Last.Value, onRenderStep)
28.  --RunService.RenderStepped:Connect(onRenderStep) -- Also works, but not recommended

Basically The Position uses members such as UDim , UDim2 , Vector2 , etc...

Please Mark as answered if this helped! Upvoting also really helps me!