Gui Tweening

(Redirected from Tweening)

In Roblox, tweening is the act of animating a change in the positions and sizes of GUIs over time. This can be used to make a GUI move smoothly from one side of the screen to the other, rather than jumping directly between the two positions. Uses include:

  • smoothly animating an score bar between two widths when points are scored
  • GUI menus which slide out from the sides of the screen
  • showing the user a tutorial by animating a fake cursor over your GUI

More generally, tweening is an abbrieviation for Inbetweening, which according to Wikipedia is the process of generating intermediate frames between two images to give the appearance that the first image evolves smoothly into the second image.

Prerequisites[edit]

You should have an understanding of the material discussed in these articles:

Tweening[edit]

You probably want to use a LocalScript for GUI tweening. There are several advantages to using local scripts over normal scripts for GUIs.

  • Access to the local player, by using the LocalPlayer property of the Players service: game.Players.LocalPlayer
  • Access to game.Workspace.CurrentCamera
  • Access to the Teleport Service
  • Runs on Player's computer, no lag in server

So the frame's position is 0,0,0,0 The frame's size is also 0,0,0,0. Just remember that.

So let's say we want it to grow out of the center of the screen. Well different players have different screens. That's why we will use the scale. That way, it will always be centered in any player's screen, no matter the size.


It's also important to note that the GUIs position is measured from the top left corner, not the center. So to make it grow from the center, we have to change the Size, and position, calling for TweenSizeAndPosition

Example
script.Parent.Frame.Position = UDim2.new(0.5, 0, 0.5, 0) -- We set the scales to .5, .5, which is the center of the screen
script.Parent.Frame.Size = UDim2.new(0,0,0,0) -- We set the frame size to 0, so it will pop out of the middle of the screen.  
script.Parent.Frame:TweenSizeAndPosition(UDim2.new(0, 400, 0, 600), UDim2.new(.5, -200, .5, 600), "Out", "Quad", 1) -- This will change the size, from 0,0 to 400, 600, and the position will change so the frame stays centered.


It should be noted that the Tweening functions do not yield the thread while they are active; you have to use waits if you need the delay.

In, Out, InOut[edit]

'In' means it slows down as it comes in. It will use the Easing Style as the way it slides. 'Out' means it speeds up to leave. InOut is both. It applies In, then half way though, it applies 'Out'

See here for a list of all the available easing directions.

Methods[edit]

TweenPosition[edit]

TweenPosition changes the position. It moves the GUI from it's current position, to endPosition, in the time it has been given.

TweenSize[edit]

TweenSize changes the size. It changes the GUI from it's current size to endSize, in the time it has been given. Since GUI positions are calculated from the top left corner, most people use the method TweenSizeAndPosition to change the size, so it shrinks in the middle, not to the top left corner.

TweenSizeAndPosition[edit]

TweenSizeAndPosition changes both the position and the size. It changes the GUI from it's current position and size, to the endSize, and endPosition, all in the time it has been given.

Types of Easing Styles.[edit]

Different bouncing styles can be used to create new looks. Besides using the ID #, you can also use strings like this: "Bounce".

See here for all the available easing styles.

Why tweening?[edit]

  • Tweening can give your game a pleasing look. Not only do GUIs look better when they slide into place instead of just appearing, they make your game look clean.
  • Tweening can also be useful when using Roblox's preset styles on your GUIs. Since you can't make the GUIs fade into existance, you must either make them just appear normally, without any animation, or make them slide or expand into existance.
  • Tweening is an easy way to make your games look impressive.

See Also[edit]

Here are some interesting articles (or links), that may be helpful to you.