How do you animate UI’s? Sometimes I wanted to make teleport screens, but I don’t know how to make them cool so uhh… how do you animate them? Like UI thats disappearing or something
There is a plugin to easily tween: TweenSequence Editor
which is extremely buggy from my personal experience but it does the job if done correctly.
or you could go the other way and use TweenService() to smoothly transition properties.
I found these REALLY useful:
Remember you can always use the DevForum search bar to find out if your topic has an answer already before you post!
Good luck 
1 Like
This is a bit of a broad question, but I’ll try to explain it to you the best I can-
Animating UI is done via scripting. It’s more commonly referred as tweening, since that is what it is programmatically called.
There are two ways to pull it off:
- TweenSize/Position(): A function of most GUI elements
- TweenService:Create(): A function of TweenService, which makes tweening a little more customizable/advanced, and is not restricted to GUI elements
For simplicity sake, you should choose 1. This is what it would look like in code:
script.Parent:TweenPosition(UDim2.new(0.5,0,0.5,0), Enum.EasingDirection.Out, Enum.EasingStyle.Sine, 1, true)
The UDim2 is the position to put it on the screen. The EasingDirection is the direction to play the EasingStyle in, which is a sine wave. You can see all of the easing styles here. The 1 is the duration of the tween, and the true is if it should override existing tweens.
If you put that code into a LocalScript under the frame you want to animate, it should immediately tween it to near the center of the screen in a smooth motion. Now- you probably want it to happen when you click a button or something, to do that, you can use the MouseButton1Up/Down event of a button. Something like this:
[button, eg. script.Parent.Button].MouseButton1Up:Connect(function()
-- [same tween code]
end)
We connect that event into our own function to run our own code when the event is fired. In this case, a tween happens.
I can’t explain much more without having more context on your use case/situation, but I hope that helps a little to get you started. Good luck.
Also, next time, put this in #help-and-feedback:scripting-support as it relates to scripting.