PcoWSkbVqDnWTu_dm2ix
We use cookies on this site to enhance your user experience

GUI Animations

GUI Animations

Jul 02 2018, 2:52 PM PST 5 min

In Roblox, “tweening” is the act of animating a change in the GuiObject/Position and GuiObject/Size of GuiObject 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 In-betweening, 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. The term originates from traditional animation when lead animators would draw what are called “key frames,” or the images that define key moments in a sequence. Inbetweeners were the artists responsible for drawing the frames that occur between each keyframe, fleshing out the sequence of frames until they achieved the frames necessary to playback at 23 frames per second.

Prerequisites

Before you continue, we recommend you be familiar with the content discussed in the following articles:

  • Articles/Intro to GUIs|Basic Roblox UI
  • Datatype/UDim2

Tweening

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 class: 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 or orientation.

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. For 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

“In” means it slows down as it comes in, also known as “easing in.” It will use the Easing Style as the way it slides. “Out” means it speeds up to leave, also known as “easing out.” “InOut” refers to both easing-in and out in the same motion path. It applies In, then halfway through, it applies Out.

See Enums/EasingDirection for a list of all the available easing directions.

Methods

TweenPosition

GuiObject/TweenPosition changes the position. It moves the GUI from its current position to endPosition, in the time it has been given.

TweenSize

GuiObject/TweenSize changes the size. It changes the GUI from its 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

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

Types of Easing Styles.

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

See Enum/EasingStyle for all the available easing styles.

Why tweening?

  • 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 existence, you must either make them just appear normally, without any animation or make them slide or expand into existence.
  • Tweening is an easy way to make your games look impressive.
Tags:
  • animation
  • gui
  • coding