UIGradient Tweens Look Jarring

[Ultimax_84 (SquidwardTortellini)]

i’m trying to make a typewriter that uses UIGrandients to gradually reveal the text, like in Skyrim, when your sneak level increases, for example. This is how it looks right now, and suddenly being able to see the front of the text is very jarring. how can i fix this?

i am not the best with UIGradients. this is my first time actually scripting with them, so the solution might be obvious, and i’m just ignorant.

this is my script:

local tweenService = game:GetService("TweenService")
local text = script.Parent
local uiGradient = text:WaitForChild("UIGradient")

local val = text:WaitForChild("numberValue")
local connection

uiGradient.Transparency = NumberSequence.new(1)

local info = TweenInfo.new(2, Enum.EasingStyle.Quad, Enum.EasingDirection.InOut)
local properties = {
	Value = 1
}

local tween = tweenService:Create(val, info, properties)

local function updateGradient()
	local minValue = math.min(val.Value, 0.999)
	local maxValue = math.max(minValue, 0.001)

	local keypoint1 = NumberSequenceKeypoint.new(0, 0)
	local keypoint2 = NumberSequenceKeypoint.new(minValue, 0)
	local keypoint3 = NumberSequenceKeypoint.new(math.min(maxValue + 0.1, 1), 1)
	local keypoint4 = NumberSequenceKeypoint.new(1, 1)

	local keypoints = {keypoint1, keypoint2, keypoint3, keypoint4}
	table.sort(keypoints, function(a, b) return a.Time < b.Time end)

	uiGradient.Transparency = NumberSequence.new(keypoints)
end

connection = val.Changed:Connect(updateGradient)

task.wait(5) -- wait for the player to load in
tween:Play()
tween.Completed:Once(function()
	connection:Disconnect()
end)

[Prototrode (Vernumerator)]

I’d say you went a bit overboard with it. All you really needed to do is change the gradient offset…

A few takeaways:

• Make sure the TextLabel’s size perfectly matches the size of the text.
• Make sure the starting offset accounts for the fading interval of the NumberSequence. For example, in the video above, the fading period takes up 5% (0.05) of the time, so the starting offset has to be Vector2.new(-0.05, 0).

[knowledgeabove (sos)]

You do not actually need gradients for this, TextLabels, TextButtons and TextBoxes have a property called “MaxVisibleGraphems”. Set this property to however many characters you want to be shown.

[Prototrode (Vernumerator)]

I’m assuming he wants the smooth fading animation. The typewriter effect is not smooth.

[Ultimax_84 (SquidwardTortellini)]

ah, i had no idea it was so simple, thank you