How can I make a number animation like this?

For this I would most definitely use TweenService.

I’ve done this a few times before and what I did was making an int value in the script, then use TweenService on that number to smoothly animate it with a lot of easing options.

Example of how I’d set it up:

-- assuming that you have an intvalue called "TweenNumber" in the script
local TweenService = game:GetService("TweenService")

function AnimateNumber(n)
	TweenService:Create(script.TweenNumber, TweenInfo.new(.3), {Value = n}):Play()
end

script.TweenNumber:GetPropertyChangedSignal("Value"):Connect(function()
	print(script.TweenNumber.Value) -- or e.g. TextLabel.Text = script.TweenNumber.Value
end

AnimateNumber(10000)

This is just the concept for how I would set it up. With TweenService you have loads of options, you can cancel a tween mid-through to tween to a different number from where it stopped and you can tween multiple properties at once. Best of all, it’s very performant.

Extra: For textlabels, make sure to use the font “Code” to make the text not shake when tweening. This is a special type of font which has the exact same width and height space for every character. I.e. the letter “I” and “W” would take the exact same amount of pixel space with this font.

API:

20 Likes