After the scalable one-line typewriter and the crazy "scrabble"-writer let's do another one: The multi-line typewriter.
A CSS-only solution of cou...
For further actions, you may consider blocking this person and/or reporting abuse
Love this one, I can't spot it but on iPhone (again...damned apple) it only shows the first two lines and then stops? Is it the background clip not behaving itself?
I only think that as the cursor position works correctly, I could be wrong!
yes it's the background-clip:text working only for the first line of the span. Safari and IOS have a lot of issues with background-clip:text
so how can we do for safari and IOS.
Did you ever find a fix for this? experiencing the same issue
Nice. I really like this one and the whole explanation. A+.
So I messed around with your code as it would just print everything on a single line and not create a new line depending on the size of the window, so I added work-break: break-all to the bottom of the .type id and now it automatically prints to the next line regardless of window size. I hope this helps to improve upon your non-JS CSS typewriter creation
Hi @afif , thank you very much for this guide. It was really useful!
I'm trying to implement a version of this in a personal project, and i needed a responsive, multi-line typewriter effect, and this fits very nicely.
However, i am having a bit of a problem. I am not sure if this is a bug or me not having understood your guide well enough, but when i try to do it the steps dont seem to match the characters. Characters get chopped up weirdly.
I made a sandbox with an example implementation of my code. I tried even hardcoding the text length, the time and the text to display and the bug is still there. Its more visible on longer texts.
If you could take a look at it and see if you can spot the bug, i would really appreciate it. n.n
here's the sandbox: codesandbox.io/s/buggy-typewriter-...
You are changing the animation, this won't work. Check my code to see the background-size definition I am using. It depends on the text length
background-size:calc(var(--n)*1ch) 200%;You need to keep this. Same for the duration, it look like this:calc(var(--n)*.3s)Thanks for replying Afif!
I re-implemented the background and the calcs, but that was not the problem.
It turns out that the problem were my modification to the animations.
I wrote:
@keyframes typeText {
from {
background-size: 0 200%;
}
to {
background-size: 100% 200%;
}
}
and commenting out the to{} fixed it. I seem to have misunderstood what the animation does exactly.
additionally, another bug is that i was using japanese characters or emojis, which seem to not work very well with monospace fonts...
Anyways, thanks again for the typewriter effect! i love it
This one's really helpful and I will surely try this, the explanation was also great.
Hey! This is great. I have been trying to implement it on text under a tag, but I am having some difficulties. That's the best I got: codepen.io/Luca-Marco-Pappalardo/p.... Basically the link text is not animated in sequence, the other best outcome I had was for the text to remain black and not be animated at all. Any idea on how ti fix this?
Good, how do you link the posts?
by creating a serie. You can find this setting next to the publish button
Oooh! I need to make mine a series too... next one coming this evening.
Nice, tks!
Respect!
Nice! Good job!
This can be great if you use it with javascript to calculate the length of text and update the variable. The code can be simple.