This Topic requires the following knowledge : Basic User Interface + Basic Scripting
Roblox Official tutorial about GUI Animations is available
Introduction
What are 2D Animations on Roblox ? It’s commonly referred as a “Tween”,
This is because TweenService is the only feature that let you create a inbetween of 2 Distances
Of course, there are multiple ways of moving the Instance, but Tweens remains the known & reliable solution as it fill the transition automatically, and easily modifiable.
In most games, it is used to make the buttons smooth upon click, or for frames apparition.
Code for the circle fading tween : ButtonAnimation.rbxl (18.5 KB)
The purpose of animation
Developers usually don’t look further than using it for making the interface dynamic and greatly improve the click feedback, the client will easily confirm what they are selecting with SFX and Visual indications, and in some cases, there is no reason to look beyond that.
Animations are additional content to make your world lively, although a game doesn’t forcely need that, however, it actually gets essential in having custom animations if you were to compete with other games, technically, it is part of the “Graphics” in the game, and can potentially make a difference against others games that have idle & dull looking assets, because a gameplay cycle is less boring and noticeable when everything around you is spirited
A Great example would be Pet Simulator, a bright yet empty environment which shocked alot of users due that they couldn’t understand it’s long-term success ! @BuildIntoGames Minimalized the map’s poly to the minimum possible in order to attract Low device users (mainly mobile), and decided to rely solely in Local visuals (Particles & Tweens) that was much less costy in performance, the selection, possession, rewards and sound work were so satisfying that i wouldn’t doubt the visual itself was part of the gameplay.
In most case, Animations will not affect performance & it’s a decent feature to upgrade your game.
What can you do in 2D ?
Let’s look a bit beyond “Buttons” and see a few examples of what’s possible 
Vertical tween, except the Shadow is slightly longer (+0.1s)
Multiple Tweens activated upon MouseEnter
Tweened apparition with a few Looped Spritesheets
Tweens have various EasingStyle available that you can easily apply into your animation, don’t hesitate to try them and see what’s best for your UI.
One of the most common combination i like to do is using ClipsDescendants to mask my UI and making a cool apparition on the screen without having to Tween it’s Size from 0% to 100%,
It doesn’t seems quite obvious, so let’s go ahead and make a Looped Animation from 0 
How to make a 2D Animation
Little reminder that Instances are GUIs, so it might be very hard to reproduct if you never attempted to create a UI and making it functionable on Roblox.
STEP 1 : CREATING ASSETS
This is common knowledge, we start by creating the graphics and see if it’s looking good
Afterward i just fills the zones and delete the lines as i no longer need them.
If your software editor allows you to Animate your objects, you can go ahead and already make a preview of the loop by Tweening the part you want to be looped.
I Confirmed that my assets are compatible and works well on loop, now i should be able to reproduct the tween in Studio
STEP 2 : REPLICATING GRAPHIC IN ROBLOX
Once again, very basic, we just have to export the assets seperately so that we can Tween the bottom and the Top should stay intact
Don’t forget to organize how the UI is set in the Explorer so you can set the Masking zone (Visibility limits) without struggle
STEP 3 : READY TO ANIMATE
When everything is set, you have to script it’s behavior :
- Must loop (repeat animation)
- Apparition (if not visible, you should stop the animation to prevent lags)
But for testing purposes, we are going to ignore performance details and just preview it straight away
local Ghost = script.Parent.Ghost
local Speed = 0.9
while true do
Ghost.Below:TweenPosition(UDim2.fromScale(-0.73,0.7),"In","Linear",Speed,true)
wait(Speed)
Ghost.Below.Position = UDim2.fromScale(0,0.7)
end
And just like that, we possess the base of our ghostie !
STEP 4 : ACCUMULATING TWEENS
Is it a ghost ? it doesn’t look like one…
If the animation isn’t self-explanatory, it’s time to add extra cute details 
In order to set multiple tweens, you need another instance to animate that must be a Parent or beyond, so that you can indirectly affect the child’s behavior
local Ghost = script.Parent.Ghost
local Speed = 0.9
local Side = false
while true do
Ghost.Below:TweenPosition(UDim2.fromScale(-0.73,0.7),"In","Linear",Speed,true)
if Side == true then
Ghost:TweenPosition(UDim2.fromScale(0.5,0.4),"In","Linear",Speed,true)
else
Ghost:TweenPosition(UDim2.fromScale(0.5,0.6),"In","Linear",Speed,true)
end
Side = not Side
wait(Speed)
Ghost.Below.Position = UDim2.fromScale(0,0.7)
end
Our first tween will never be disturbed… even if the Main Frame is also moving, the final position goals and duration remain the exact same.
The style Linear is a bit plain, so let’s try out something else : “InOut”,“Quad”
knowing how to create, add and stacks tweens is all you needed, because further detail is repeating STEP 4 until you’re satisfied of your animation, Here, let’s add a face and try making it blink with Masking :
RESULTS
Code
local Ghost = script.Parent.Ghost -- Selecting Main Frame
local Speed = 0.9 -- Will cycle every 0.9 seconds
local Side = false -- Variable to decide if it should go down or up
local Blink = 0 -- Variable that if 0 is reached, then will Blink eyes
while true do
if Blink == 0 then
Ghost.Face:TweenSize(UDim2.fromScale(0.6,0.2),"InOut","Quad",Speed/2,true)
Blink = math.random(2,5) -- Renew the Blink Feature
delay(Speed/2,function() -- Delay because we shouldn't pause the Ghost Loop
Ghost.Face:TweenSize(UDim2.fromScale(0.6,0.5),"InOut","Quad",Speed/2,true)
end) -- Delay has ended
end -- Blink Action has ended
Blink = Blink - 1
Ghost.Below:TweenPosition(UDim2.fromScale(-0.73,0.7),"In","Linear",Speed,true)
if Side == true then -- Going DOWN v
Ghost.Face:TweenPosition(UDim2.fromScale(0.5,0.4),"InOut","Quad",Speed,true)
Ghost:TweenPosition(UDim2.fromScale(0.5,0.4),"InOut","Quad",Speed,true)
else -- Going UP ^
Ghost.Face:TweenPosition(UDim2.fromScale(0.5,0.55),"InOut","Quad",Speed,true)
Ghost:TweenPosition(UDim2.fromScale(0.5,0.6),"InOut","Quad",Speed,true)
end
Side = not Side -- Reverse value (false to true / true to false)
wait(Speed)
Ghost.Below.Position = UDim2.fromScale(0,0.7) -- Reset the Bottom Part's Position
end
Ghostie is complete !
GhostAnimation.rbxm (4.6 KB)
^ If you wanna use it or see how it looks in-game
This can be used in any kind of GUI Support :
ScreenGui, BillboardGui, SurfaceGui
This “How-To” is a bit unprecise at certain points, the gist of this unusual use of Tweens is that this service is not a closure that was made exclusively for the use of Menu & Selection, you can do so much more with it.
…and that UI Designs isn’t all about graphics !
if you feel like you’ve reached High-tier of UI Design in Roblox, it might be time to pass into Level 2 
Tips:
- Offset are “Pixels”, The properties will NOT resize if the screen’s canvas
(or screen resolution, such as mobile) has changed. - Scale is the % Percentage of the Parent’s Size
(ex : 0.5 Scale is auto-adjusting into 50% Pixels filling) - TweenPosition & TweenSize are solely for Size and Position UDim2 (2D) properties, if you’re looking to use more properties (such as Rotation), see TweenService (slightly more complex)
