DEV Community

Cover image for A scalable CSS only Typewriter Effect

A scalable CSS only Typewriter Effect

Temani Afif on August 28, 2021

You want a Typewriter effect for your text but you are lost within all the variations that use JS and the ones that use a complex CSS code. Search...
Collapse
 
grahamthedev profile image
GrahamTheDev

Oh so that is why nobody actually said yes to the war, a surprise attack!

Unfortunately (for me) this was going to be my solution so I guess I better come up with something silly or clever as this basically ticks all of the sensible options!

p.s. you can't tick "accessible" without the prefers-reduced-motion Media query to switch the blink and animations off and just swap the words out!

Love it (oh crap, I can't say that in a war can I....errrmm), sorry I meant I hate it! 🤣

Collapse
 
afif profile image
Temani Afif

This is my secret "speed-of-light" attack. A HIT in less than 24h!

No one can beat this!

Collapse
 
grahamthedev profile image
GrahamTheDev

So I am thinking I am going to make this fair despite your trickery, I will start easy and do a HTML only version first! 😉

Thread Thread
 
alvaromontoro profile image
Alvaro Montoro

Does this count?

Thread Thread
 
grahamthedev profile image
GrahamTheDev

This is going to be a very short war if you keep taking all the fun ideas! This was essentially my second entry so between you both I am now left with pure HTML and a type…righter (and that will be silly!)

Thread Thread
 
alvaromontoro profile image
Alvaro Montoro

So you have ideas, the rest are excuses 😝

I know a way of doing it in pure HTML, but it requires several files. I'm curious about the type-righter 🤔

Thread Thread
 
grahamthedev profile image
GrahamTheDev

The HTML is the same as when I did the video, so yes, multiple files. Type Righter is silly, it may be my entry!

Collapse
 
siddharthshyniben profile image
Siddharth

Came here to say this 😂😂

Collapse
 
alvaromontoro profile image
Alvaro Montoro

This one is not multiline. That's something you can improve (and hate upon 😋)

Collapse
 
grahamthedev profile image
GrahamTheDev

hehe, also in fairness your animation is more "typewritery" but as I said this was going to be my come back so now I need to get the thinking cap on!

p.s. are either of you wanting to come to this discord server for article sharing or are neither of you bothered?

Already added this article to the posts section there so hopefully it will get some shares!

Thread Thread
 
alvaromontoro profile image
Alvaro Montoro

I have to admit, I haven't used discord (or maybe I don't remember). Let me reread the post to understand it better, but my door is open to collaborate and learn about the things other people do.

Thread Thread
 
grahamthedev profile image
GrahamTheDev

I am a discord virgin too until today, quite easy to get your head around though if you do decide to come along! I will drop you an invite either way, don't worry if you decide not to bother!

Collapse
 
facundocorradini profile image
Facundo Corradini

Dude that was amazing! Never saw a typewriter effect that doesn't rely on monospace fonts!

I'd add (and very clearly highlight) that to your pros list

✔️ Doesn't require monospace fonts
✔️ Can use any font


on the other hand, monospace probably looks more typewriter-like, but technically this feat is still amazing

Collapse
 
madsstoumann profile image
Mads Stoumann • Edited

This is amazing, great work with all the explaining demos! 👏

Collapse
 
afif profile image
Temani Afif

Thanks 😊 I am waiting to see your ideas now 😋

Collapse
 
kathe profile image
Katarzyna

This is exactly what I was looking for! Brilliant <3

Collapse
 
siddharthshyniben profile image
Siddharth

Did you forget to handle positioning, or is it just me:

Collapse
 
afif profile image
Temani Afif • Edited

add vertical-align:bottom to them main span to avoid this. It's the baseline alignment that is inconsistent across browser. For the other issue, you have to rectify the height. the 1.2 I used is an approximation that you have to update based on your real font. Each browser/OS has its own default font so the result may not be the same for everyone OR set the line-height equal to height and you won't get the issue.

Collapse
 
ipapoutsidis profile image
Ilias Papoutsidis

@afif may I call first of all?
You are doing amazing things , using only CSS.
Well done please continue

Collapse
 
afif profile image
Temani Afif

don't worry, I am not planning to stop 👍

Collapse
 
rishitaraha profile image
Rishita Raha

Wait, there is an issue with the first letter!

I am unable to understand what the issue is with the first letter. Can someone explain this to me?

Collapse
 
ac_raffle profile image
AC Raffle

If I wanted the text to only play once and then pause, how would I code that?