The GIF example’s UI used TweenPosition and TweenService. I do not recommend using for loops in this case. An example code is given below:
script.Parent:TweenPosition(UDim2.new(0, 0, 0, 0), 'Out', 'Linear', 0.5)
The code above tweens the GUI element to the position, and the easing style is set to Linear and it takes 0.5 seconds to tween to the position
script.Parent:TweenSize(UDim2.new(0, 0, 0, 0), 'Out', 'Linear', 0.5)
The code above tweens the GUI element to the size, and the same settings as the position
script.Parent:TweenSizeAndPosition(UDim2.new(0, 0, 0, 0), UDim2.new(0, 0, 0, 0) 'Out', 'Linear', 0.5)
The code above tweens the GUI element to the size, the second UDim2 is the position, and the same settings as the position. It tweens size and position at the same time.
local tween = game:GetService('TweenService'):Create(script.Parent, TweenInfo.new(0.5), {Transparency = 1})
tween:Play()
The code above tweens the GUI element’s (or any roblox part, not only for gui) transparency, it takes 0.5 seconds to do so. You can add more tween info, check the ROBLOX api.
Check the EasingStyles API to get a list of all easing styles.