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 = UDim2.new(originalSize.X.Scale, originalSize.X.Offset, originalSize.Y.Scale * 0.8, originalSize.Y.Offset)
local tweenInfo = TweenInfo.new(
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
)
button.MouseEnter:Connect(function()
-- Start the tween to squash the button in
local squashTween = game:GetService("TweenService"):Create(button, tweenInfo, {
Size = squishedSize
})
squashTween:Play()
end)
button.MouseLeave:Connect(function()
-- Start the tween to restore the button's original size
local unsquashTween = game:GetService("TweenService"):Create(button, tweenInfo, {
Size = originalSize
})
unsquashTween:Play()
end)
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, UDim2.new(Button.Size.X.Scale, 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()
end
Button.MouseEnter:Connect(function()
if (IsTweening == true) then return end
IsTweening = true
Tween(Button, TweenInfo.new(0.8, Enum.EasingStyle.Bounce, Enum.EasingDirection.Out), {Size = Size2, BackgroundColor3 = Color2, TextSize = 30})
task.wait(0.8)
IsTweening = false
end)
Button.MouseLeave:Connect(function()
IsTweening = false
Tween(Button, TweenInfo.new(0.7, Enum.EasingStyle.Bounce, Enum.EasingDirection.Out), {Size = Size1, BackgroundColor3 = Color1, TextSize = 40})
end)
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.