Choppy UI tween

Help and Feedback Scripting Support
,
#1

im tweening the size of some buttons and it doesn’t look smooth, im guessing its because it is tweening up by 1 pixel when sizing it? is there a way to get past this or are the buttons just too small? ty if you can help

the code (not really needed tho) 
for i, v in ipairs(script.Parent.Main.Content.Frame:GetChildren()) do
	if v:IsA('TextButton') then
		v.MouseEnter:Connect(function()
			v:TweenSize(UDim2.new(1,0,0,30), Enum.EasingDirection.Out, Enum.EasingStyle.Quad, 0.75, true)
			game.SoundService.UI.UI_ButtonHover:Play()
		end)
		v.MouseLeave:Connect(function()
			v:TweenSize(UDim2.new(1,0,0,23), Enum.EasingDirection.Out, Enum.EasingStyle.Quad, 0.75, true)
			game.TweenService:Create(v, TweenInfo.new(0.5), {TextColor3 = Color3.new(1,1,1)}):Play()
		end)
		v.MouseButton1Up:Connect(function()
			game.SoundService.UI.UI_ButtonRelease:Play()
			game.TweenService:Create(v, TweenInfo.new(0.5), {TextColor3 = Color3.new(1,1,1)}):Play()
		end)
		v.MouseButton1Down:Connect(function()
			game.TweenService:Create(v, TweenInfo.new(0.5), {TextColor3 = Color3.new(0.6,0.6,0.6)}):Play()
		end)
	end
end

oh also the same thing happens when tweening TextSize

2 Likes
#2

I think it might be because the text is too small. (Not a professional at tweening so I might be wrong) I suggest posting this within the UI category.

#3

Try changing the EasingStyle to Quart

#4

I think that because of how the text is rendered it can only increase the size of the letters incrementally (example: a font size of 12.4 is the same as 12).

You could use a CanvasGroup to scale the text nicely, though I’m not sure if they’re live:

1 Like
#5

TextSize does not have subpixel scaling, which means it will round to the nearest size (so you can’t have a text size of 4.5, only 4 or 5). I’d suggest to use a UIScale to scale the text up instead.

1 Like
#6

the text size can only go up by whole numbers, example 0-1. Something you could try is enabling the TextScaled property inside of your TextLabel and then tweening the Size of your TextLabel. This will make the text change sizes smoothly. Make sure to mark this as the solution if it helped!

#7

it’s already live, except it’s silently released without notice.

1 Like
#8

Yo! Have you tried looking into spring? It’s a really cool module for UI animation. Try it out!
Spr

#9

replace TweenSize with TweenService:Create(button, TweenInfo.New(0.75, Enum.EasingDirection.InOut, Enum.EasingStyle.Quart), {Size = UDim2.New(1,0,0,25)})

#10

You should use UIScale to properly and smoothly animate your text on hover.

Here’s an example script :

local ts = game:GetService("TweenService")
local tweenInfo = TweenInfo.new(.25, Enum.EasingStyle.Quart, Enum.EasingDirection.Out)

function sizeAnimationEnter(btn)
-- Making it bigger
	ts:Create(btn.UIScale, tweenInfo, {Scale = 1.1}):Play()
end

function sizeAnimationLeave(btn)
-- Making it smaller
	ts:Create(btn.UIScale, tweenInfo, {Scale = 1}):Play()
end

script.Parent.MouseEnter:Connect(function()
-- If mouse hovers parent
	sizeAnimationEnter(script.Parent)
end)

script.Parent.MouseLeave:Connect(function()
-- If mouse stops hovering parent
	sizeAnimationLeave(script.Parent)
end)

To make this work, insert a UIScale into the text or button you want to animate and set the scale to 1.

1 Like