Hello, I was wanting to add some type of custom typing effect and I was looking through old post and wanted to see how I could re-create this effect?
I don’t want the coloring part of this, I was referring to the sizing where it goes through each letter, increases in size, and goes back to normal.
I am familiar with Rich Text and the font size feature.
i would achieve this by creating each individual character as a TextLabel and positioning them next to eachother, instancing a UIScale inside of each character. you would then run a for i,v in pairs() loop through each letter/TextLabel.
this loop would tween the Scale value of the UIScale inside the TextLabel up, and then down. we dont tween the TextSize here as it would be choppy due to TextSize not accepting decimals. the loop would wait for a moment, and then continue. this makes the effect of a waving motion
it looks like specifically its a bunch of textlabels representing each character inside a frame with uilistlayout.
I can tell because the way the other characters react when one increases in size
yes, a UIListLayout would be a smart way to add padding so that when the character increases in size it doesnt overlap with other characters
that and it contributes to the wave effect as the rest react accordingly
i made a very unrefined prototype to convey the idea
local Frame = script.Parent.Frame
local Message = "I am testing this system!"
local IndividualCharacters = string.split(Message,"")
local TweenService = game:GetService("TweenService")
local InfoGrow = TweenInfo.new(.15,Enum.EasingStyle.Quart,Enum.EasingDirection.In)
local InfoShrink = TweenInfo.new(1,Enum.EasingStyle.Quart,Enum.EasingDirection.InOut)
for _,Character in pairs(IndividualCharacters) do
local TextLabel = Instance.new("TextLabel")
TextLabel.Text = Character
TextLabel.Size = UDim2.fromScale(0.018,0.296)
TextLabel.BackgroundTransparency = 1
local UIScale = Instance.new("UIScale")
UIScale.Parent = TextLabel
TextLabel.Parent = Frame
end
task.wait(1)
for _,Character in pairs(Frame:GetChildren()) do
if not Character:IsA("TextLabel") then continue end
local TweenGrow = TweenService:Create(Character.UIScale,InfoGrow,{Scale = 1.25})
TweenGrow:Play()
TweenGrow.Completed:Wait()
local TweenShrink = TweenService:Create(Character.UIScale,InfoShrink,{Scale = 1}):Play()
end
Here I was able to achieve this affect:
Here is the code I used. I encourage you to use it as a educational resource and to take notes on it. If you need help understanding anything, feel free to reach out to me:
task.wait(4)
local ts = game:GetService("TweenService")
local function animate(textLabel)
local startTween = ts:Create(textLabel, TweenInfo.new(.1, Enum.EasingStyle.Linear), {
["Size"] = UDim2.new(0.062, 0,1.3, 0),
["TextColor3"] = Color3.new(0.737255, 0.505882, 1)
})
local endTween = ts:Create(textLabel, TweenInfo.new(.1, Enum.EasingStyle.Linear), {["Size"] = UDim2.new(0.061, 0,1, 0)})
startTween:Play()
startTween.Completed:Wait()
endTween:Play()
end
while true do
for i,label in pairs(script.Parent:GetChildren()) do
if label:IsA("TextLabel") then
label.Visible = true
task.wait(.05)
end
end
for i,label in pairs(script.Parent:GetChildren()) do
if label:IsA("TextLabel") then
task.spawn(animate, label)
task.wait(.025)
end
end
task.wait(3)
for i,label in pairs(script.Parent:GetChildren()) do
if label:IsA("TextLabel") then
label.Visible = false
label.TextColor3 = Color3.new(0.133333, 0.133333, 0.133333)
end
end
end
Yours looks cool good job! What do you think of mine?
definitely a lot smoother than mine, also like the coloring effect
Thank you! I’m glad you liked it
Thank you for the help, I’m trying to incorporate it now, how did you get rid of this weird spacing issue between the bigger and smaller letters?
I simply put the text next to each other in this way and let UiListLayout do its job in orgnaizing it.
Hmm, maybe I’m doing something wrong?
I think you have to adjust the size on the X axis so that the textscaled is consistent with all the elements. Play around with the size until you find something you like
see how it looks like that when the text is shrinked on the X axis
I then lead right back to this issue,
If I try and make any offset values, it wouldn’t work for the system I am trying to do with Usernames being set to the text box.
try using Rich Text
you can modify letters, words, and phrases without using separate TextLabels with the use of Rich Text
try useing the padding in uilistlayout on scale
