How do I animate the appearance and disappearance of a button?

Do you have any ideas on how to make an animation of the button “unfolding” and “collapsing”, similar to the animation of the appearance and disappearance of Windows windows?

That is, to have a small dot in the center - our button. And then it began to increase and turned into a large standard version, while remaining in one place in position.

3 Likes

You can use the TweenService to do this.

1 Like

No, I’m going to use it. But how can I do exactly that?

1 Like

Well, that is, to pin this button. So that it stays in one place when zooming the button.

1 Like

I have the same thing, but the button starts resizing from the upper-left corner, not from the center. Here is the code where I tried to implement my thing:

MessageLabel.Position = UDim2.fromScale(1, 1)
game.TweenService:Create(MessageLabel, TweenInfo.new(0.5), {TextTransparency = 0, Position=InitialPos, Size=UDim2.fromScale(InitialSize.X.Scale, InitialSize.Y.Scale)}):Play()~~~

You’re not answering the OP’s question at all.
To tween a gui object at a fixed point, you can simply change the AnchorPoint property as the fixed point you desire.

Demonstration:

1 Like

This is a pretty good option, but what about the rectangular message line that appears? I forgot to mention that this is exactly a rectangle.

Same thing:

1 Like

Anchor Point has 0.5 and 0.5 set, and it stands in the center, but anyway, as you can see on the video, the message appears in the corner, but I need to center it.
Screenshot_2

Did you set the position of the gui object at the center first before tweening and making it visible?

Well, yes, it is in the center, as you can see in the upper image. Or do you have something else?
For understanding:

local InitialSize = MessageLabel.Size
MessageLabel.Size = UDim2.fromScale(0.01, 0.01)
game.TweenService:Create(MessageLabel, TweenInfo.new(0.5), {TextTransparency = 0, Size=UDim2.fromScale(InitialSize.X.Scale, InitialSize.Y.Scale)}):Play()

No, I mean, you have to set the position (not the anchor point) of the gui object to the center before the tween, because anchor point doesn’t take effect until it is moved.

Edit: From your screenshot, apparently there is something not allowing you from modifying the position, potentially something such as UIListLayout?

Edit2: If you have to keep the gui objects under the UIListLayout then, consider setting the position of the parent of these gui objects instead.

Yes, I noticed it and everything started working. But there is one problem - the position does not change smoothly.

Can you show me your script? (forum characters limit, ignore this)

Edit: Another question is, is your internet doing fine? I’m asking because my tweens work well.

Unfortunately, I can’t copy the script properly, but you can take a look here.

||||local MessageLabel = game.ReplicatedStorage.MessageLabel:Clone()|
|---|---|---|---|
||||MessageLabel.Parent = TemplateButton.Parent.Parent.Parent.Parent.MessageGui.Frame|
||||MessageLabel.Text = You have chosen a ..string.lower(TemplateItem.Value.Name)|
||||local InitialSize = MessageLabel.Size|
||||MessageLabel.AnchorPoint = Vector2.new(0.5, 0.5)|
||||game.TweenService:Create(MessageLabel, TweenInfo.new(1, Enum.EasingStyle.Exponential), {TextTransparency = 0}):Play()|
||||game.TweenService:Create(MessageLabel.UIScale, TweenInfo.new(1, Enum.EasingStyle.Exponential), {Scale = 1}):Play()|
||||wait(2)|
||||game.TweenService:Create(MessageLabel, TweenInfo.new(1), {TextTransparency = 1}):Play()|
||||wait(1)|
||||MessageLabel:Destroy()|

I have a good Internet connection.

You want at center of screen? If so change position to…

Udim.New(0.5,0,0.5,0)

I’ve already done that. Now we need to do something to make the animation play smoothly.

Don’t tween an individual property, put it in to the same tween you have created above. You can have the {TextTransparency = 0, Size = UDim2.fromScale(x,y)} as goal instead.

Nothing changes. I changed the code a bit in the hope of a smooth animation, but it didn’t work. And before there was just this option. Could you send me your button and the script in the Rbx file? Maybe the characteristics of our buttons do not match.