Tweening text on GUI using 2 number values?

[LaxinityYT (lax)]

Hello, I’ve been searching for a while and I couldn’t quite find exactly what I’m looking for. I have a GUI that displays the players current XP and updates it when the XP value is changed. I want the text/number of the XP on the GUI to transition smoothly between the numbers, instead of instantly shooting up to the next number. I.e. if the number is at 0 and I add 5 to the value, it instantly shoots to 5 instead of counting up smoothly “1, 2, 3, 4, 5”. I want the count-up to slow down as it reaches the end. How would I go about doing this?

Bottom left is where the XP bar and the thing I’m talking about is located.

What I have:

What I want:

Here is the script that handles the GUI for those curious:

local player = game.Players.LocalPlayer

local text = script.Parent.XPText

local xp = game.Players.LocalPlayer.xp
local requiredXp = game.Players.LocalPlayer.requiredXp

-- Comma formatting \/
function Comma(amount)
	local formatted = amount
	while true do  
		formatted, v = string.gsub(formatted, "^(-?%d+)(%d%d%d)", '%1,%2')
		if (v==0) then
			break
		end
	end
	return formatted
end
-- Comma formatting /\

--

-- Update on XP change \/
xp.Changed:Connect(function()
	
	text.Text = Comma(math.round(xp.Value)).."/"..Comma(math.round(requiredXp.Value))
	script.Parent.Bar:TweenSize(UDim2.new(xp.Value / requiredXp.Value, 0, 1, 0), Enum.EasingDirection.InOut, Enum.EasingStyle.Quart, 0.35, true)
	
end)
-- Update on XP change /\

Any and all help is appreciated. Thank you!

EDIT: What I mean by “using 2 number values” is the current value and the value it should move to.

[codyorr4]

you could try something similar to this.

local textLabel = script.Parent

local function lerp(a, b, t)
	return a + (b - a) * t
end

-- slow down when approaching the target.
local function easeOutQuad(t)
	return t * (2 - t)
end

local function update(currentXP, newXP, duration)
	local startTime = tick()
	local endTime = startTime + duration
	while tick() < endTime do
		local now = tick()
		local elapsed = now - startTime
		local progress = easeOutQuad(elapsed / duration)
		local interpolatedXP = lerp(currentXP, newXP, progress)
		textLabel.Text = tostring(math.floor(interpolatedXP))
		task.wait()
	end
	textLabel.Text = newXP
end


-- EXAMPLE USAGE:

local currentXP = 122
local newXP = currentXP + 5; -- add 5 to the current xp.
local duration = 0.5 -- can change this to determine update speed.
update(currentXP, newXP, duration)

I wouldn’t copy and paste this, but you should be able to learn off this and make your own lerp/easing functions for the type of easing that you’ve described in the post (smooth transition that slows down as it reaches the target).

if this isn’t ideal, you may want to look into trying TweenService to Tween the number before updating the TextLabel but that may be more overhead than what you want… even if it is simpler. (considering you’ll have to create a new tween for every XP drop)

[sharedkronaz (hex)]

You could do a for loop

--// Constants
local Label = script.Parent

--// Variables
local Experience = 50 -- This is the players current XP level, so it should be: Player.leaderstats.XP.Value or whatever you named it
local IncreaseTime = 0.2 -- The time to wait between adding each points

--// Functions

local function DisplayPoints(TargetValue:number)
    for Point = Experience, TargetValue do
        Label.Text = tostring(Point)
        task.wait(IncreaseTime)
    end
end

--// Calls
DisplayPoints(100) -- Will count to 100

I hope I understood your problem correctly, if you have any questions, please ask!