View source for Tweening

{{EmphasisBox|[[Image:Exclamation.png]]  '''WARNING:''' This tutorial requires advance knowledge of GUIs.  Please review the prerequisites.|red|  }}
__TOC__

== Prerequisites (Requirements) ==
It is necessary for you to understand how GUIs work and to have intermediate scripting abilities; to understand tweening. Here's the tutorials you should check out:
* [[Beginner%27s_GUI_Tutorial|The Beginner's GUI Tutorial]]
It's necessary for you to understand the position of GUIs, how to resize them, and how they work before you start working with tweening. 
* [[Udim2|UDim2 Tutorial]]
== Tweening: What is it? ==
Tweening (in ROBLOX), is the movement and resizing of frames, buttons, or other GUI objects.  The word ''Tweening'' comes from the word ''Inbetweening'', which is (according to wikipedia) ''the process of generating intermediate frames between two images to give the appearance that the first image evolves smoothly into the second image.''  This means that if you start at position x, y, that the Object will move from that position, to another sliding.  Roblox actually moves the frame in question, and doesn't generate another one.  <!-- Actually it does, but... Let's not confuse our users.... -->

Tweening in roblox is basically a way to beautify your GUIs, and create a more pleasing graphical appearance.  Tweening can be used to resize GUIs, move GUIs, or both.  There are 3 methods used in tweening, which is all part of TweenService, which help opperates tweening.  You don't have to worry about TweenService though.  

== How to use it ==
You probably want to use a [[RBX.lua.LocalScript (Object)|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|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 <code>TweenSizeAndPosition</syntaxhighlight>

{{Example|<syntaxhighlight lang="lua">
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 too 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 too 400, 600, and the position will change so the frame stays centered.  
</syntaxhighlight>}}

== In, Out, Inout ==
'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' 
{| class="wikitable" width=100% border="1" cellspacing="0" cellpadding="4" style="background-color: #fdd; border: 1px solid #f00;"
{{:EasingDirection (Enum)}}

== Methods ==
Some people may like looking at the official methods.  You can do this here:
===TweenPosition===
This method changes the position.  It moves the GUI from it's current position, to ''endPosition'', in the time it has been given.
{{:TweenPosition}}
{{clear floats}}

===TweenSize===
This method 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.  
{{:TweenSize (Method)}}
{{clear floats}}

===TweenSizeAndPosition===
This 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.  
{{:TweenSizeAndPosition (Method)}}
{{clear floats}}

== 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".  
{{:EasingStyle (Enum)}}

==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 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 ==
Here are some interesting articles (or links), that may be helpful to you.
* [[Beginner%27s_GUI_Tutorial|The Beginner's GUI Tutorial]]
* [[Udim2|UDim2 Tutorial]]
* [[EasingStyle]]
* [[TweenPosition]]
* [[TweenSize]]
* [[TweenSizeAndPosition]]
* [[GUI_Collision_Tutorial | GUI Collision Detection]]
* [[GUI_Guide | GUI Guide]]
* [[GUI_Tutorial]]

[[Category:Tutorials]]
[[Category:Scripting Tutorials]]