How do I achieve this button fluidity?

How did they make it animate that way, I’ve tried tweenservice but it just doesnt give the same effect for some reason

1 Like

Are you able to show how it looks when you use tweenservice so I can best assist you?

um well i just used a simply tween and then well i use all the easing styles and none of them came close to looking like that idk why

Okay, you could try to give this a go, will need some editing for your needs though:

local button = script.Parent

local originalSize = button.Size
local squishedSize =, originalSize.X.Offset, originalSize.Y.Scale * 0.8, originalSize.Y.Offset)

local tweenInfo =
    0.2, -- Duration
    Enum.EasingStyle.Quad, -- Easing style
    Enum.EasingDirection.Out, -- Easing direction
    0, -- Number of times to repeat (0 means play once)
    false, -- Should the tween reverse?
    0 -- Delay before starting the tween

    -- Start the tween to squash the button in
    local squashTween = game:GetService("TweenService"):Create(button, tweenInfo, {
        Size = squishedSize

    -- Start the tween to restore the button's original size
    local unsquashTween = game:GetService("TweenService"):Create(button, tweenInfo, {
        Size = originalSize

Whats up with this part if you could explain it please

It’s getting the original size and making it smaller by multiplying it by 0.8.

Actually wait, I made a mistake try this:

local squishedHeight = originalSize.Y.Offset - 20

um yeah it still doesnt look like the video i showed, its just a smooth tween it ddoesnt really bounce and feel alive

Can you show a video of it? It’ll help me try to fix the current issues with it.


local Button = script.Parent

local Color1, Color2 = Color3.fromRGB(255, 255, 255), Color3.fromRGB(255, 111, 113)
local Size1, Size2 = Button.Size,, Button.Size.X.Offset * 0.78, Button.Size.Y.Scale, Button.Size.Y.Offset * 0.8)
local IsTweening = false

local Tween = function(Inst, Info, Goal)
	return game:GetService("TweenService"):Create(Inst, Info, Goal):Play()

	if (IsTweening == true) then return end
	IsTweening = true
	Tween(Button,, Enum.EasingStyle.Bounce, Enum.EasingDirection.Out), {Size = Size2, BackgroundColor3 = Color2, TextSize = 30})
	IsTweening = false

	IsTweening = false
	Tween(Button,, Enum.EasingStyle.Bounce, Enum.EasingDirection.Out), {Size = Size1, BackgroundColor3 = Color1, TextSize = 40})

Make sure the Buttons AnchorPoint is set as 0.5, 0.5

1 Like

um i just tried your code and its not working at all actually

That’s somewhat close but the bounce is not the same, its like like a static bounce if that makes, its just super clear thats not what the video i showed looks like it just doesnt look the same

Rather than tying everything to one tween, try experimenting with different tweens for the different properties at different speeds and easing styles, if you haven’t already. There seems to be a slight overshoot of the goal when the size changes which doesn’t happen with the colors. I don’t think the easing style for the button size is bounce, either; try either “Back” or “Elastic”.

1 Like

This is called a Spring. There are multiple different modules to help you achieve this such as:

Fusion also has a Spring module, but it’s based on react-like UI programming so that’s probably not what you want.

1 Like

Ohhh okay that makes sens I think I’ll just try to make it from scratch to get a better understanding, thank you!

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.