Text ‘FadeIn’ effect for each character

Help and Feedback Scripting Support
, , , ,
#1

Hello,

I am currently having a typewrite effect in texts for conversations, but it doesn’t look that great at all, so I would appreciate it SO MUCH if anyone know a code for typewriting effect WITH ‘FadeIn’ for each character of the text.

here’s an example:

#2

just write a function to create words and store the letters inside a table, you can from there create the words and position them and animate them all based on a sine pattern

1 Like
#3

That’s exactly what I really want, but I haven’t figured out the code for it, could you perhaps send me an example at the least? Thanks!

edit: i’m pretty sure it’s possible by using Defaultio’s Rich Text Markup, but then again, I still don’t know how to get it working in the way i wanted.

#4

From what im assuming (this is probably wrong as hell) create 2 text labels, one to store the actual text and one to store the text you want to animate, use some string magic to get the position of the text (have an invisible sample label that has the same content as the actual label but with the word you’re about to add) and use the textbouds.X as the position for the character you want to add/animate?

1 Like
#5

here is the code, enjoy

local to_edit = {}

local function write_letter(c)
	local label = Instance.new("TextLabel")
	label.Size = UDim2.fromOffset(50, 50)
	label.Text = c
	label.BackgroundTransparency = 1
	label.TextScaled = true
	label.Visible = false

	Instance.new("UIScale", label)
	table.insert(to_edit, label)

	return label
end

local function write_word(s)
	local len = string.len(s)
	for i = 1, len do
		write_letter(s:sub(i, i))
	end
end

local function flush()
	for _, v in ipairs(script.Parent.Frame:GetChildren()) do
		v:Destroy()
	end
	table.clear(to_edit)
end

local function load_animation(container)
	local rs = game:GetService("RunService")
	local vel = 0.05 -- just the spawn speed
	local duration = 0.5
	local freq = 5
	local amp = 12
	local rot = 15

	local n = #to_edit
	local cx = (n - 1) * 15
	local pos, t = {}, {}

	-- letter positions
	for i, v in ipairs(to_edit) do
		v.Parent = container
		v.Visible = false
		v.AnchorPoint = Vector2.new(0.5, 0.5)
		v.Position = pos[i] or UDim2.new(0, (i - 1) * 30, 0, 0)
		pos[i] = v.Position
	end

	coroutine.wrap(function()
		for i = 1, n do
			task.wait(vel)
			to_edit[i].Visible = true
			t[i] = time()
		end
	end)()

	local con
	con = rs.RenderStepped:Connect(function()
		local now = time()
		for i, v in ipairs(to_edit) do
			if not v.Visible then continue end
			
			local progress = math.clamp((now - t[i]) / duration, 0, 1)
			if progress < 1 then
				local elapsed = now - t[i]
				local wave = math.sin(elapsed * freq) * amp * (1 - progress)
				local rotation = ((i - 1) * 30 - cx / 2) / (cx / 2) * rot * (1 - progress)

				v.UIScale.Scale = 1 + math.abs(wave) / amp * 0.5
				v.Position = UDim2.new(pos[i].X.Scale, pos[i].X.Offset, 0, wave)
				v.Rotation = rotation
				v.TextColor3 = Color3.fromHSV((i - 1) / n, 1, 1):Lerp(Color3.new(1, 1, 1), progress)
			end
		end
	end)

	task.delay(n * vel + duration + 0.5, function()
		con:Disconnect()
	end)

	return con
end

while true do
	write_word("grace loves to groom the grass")
	load_animation(script.Parent.Frame)
	task.wait(6)
	flush()
end
2 Likes
#6

yeah i was so wrong​:notes::saxophone::bug:

reply limit

1 Like
#7

This is super dope! Although I’m wonder on how the pattern could be randomized, because it plays the same swaying effect everytime.