How do I make this kind of UI popup animation

Help and Feedback Scripting Support
#1

I want it to look like this;

2 Likes
#2

Well logically I’d assume you could just tween the size of the UI, and as it gets bigger the transparency decreases until its a solid, and as it gets smaller the transparency increases.

#3

By using TweenService

#4

This waters down what’s happening.

It looks like there’s one size tween and multiple transparency tweens happening per state change of the UI (there are two in this instance, Open and Close).

I believe it may use co-routines to achieve the effect and uses Instance:IsA() to determine which type of transparency to modify per UI element. (ImageTransparency for ImageLabels, TextTransparency for TextLabels, etc). This is quite a nice yet simple UI and I like how they’ve done the UI Animations.

#5

Add a UIScale in your frame that you want to pop up. Then when you need to make the animation, set the scale to 0.7 then tween the Scale property to 1.