DEV Community

Cover image for Upgrading the CSS only Multi-line Typewriter effect
Temani Afif
Temani Afif

Posted on • Updated on

Upgrading the CSS only Multi-line Typewriter effect

In this post, I will enhance The Multi-line Typewriter to create a more fancy variation of the "writer effect" using only CSS.

PS: click the "rerun" button at the bottom right of each embedded Pen to run the animation again.


The Filling

Let's update the color of an existing text letter by letter.

The Sliding

A sliding cursor to reveal the text, why not!

The One Shot

A letter-by-letter animation you said? Nah! let's show everything at once!

The Random

Not that random but it looks like

The Fragmentation

A last one from the future where I will consider the Fragmentation effect I built with the CSS Paint API

Only Chrome and Edge support this for now. It should work with a multi-line text but Chrome is a bit buggy with mask when it comes to multi-line.

Get back to this in 2 years to have full support everywhere with 0 bugs.


That's it!

Now you have plenty of CSS-only typewriter effects. Enjoy πŸ‘

The End

Top comments (13)

Collapse
 
afif profile image
Temani Afif

@alvaromontoro You cannot survive this 5x combo!

Collapse
 
siddharthshyniben profile image
Siddharth

Ok, now this is not even a typewriter effect.

Collapse
 
alvaromontoro profile image
Alvaro Montoro • Edited

^ this right here.

@afif all these effects are cool and impressive... but technically they are not a typewriter or close to it. So, I call this entry invalid, null, and void. πŸ˜‚

Collapse
 
afif profile image
Temani Afif

So, I call this entry invalid, null, and void. --> pff, a looser thought! All these are the Upgrade of the classic typewriter. They are from another dimension, another world!

Thread Thread
 
alvaromontoro profile image
Alvaro Montoro

A world in which they respect HTML and CSS?

Thread Thread
 
afif profile image
Temani Afif

A world where HTML & CSS is a must. Everything is built with HTML & CSS there (buildings, cars, roads, mountain, etc). What we have here is only 5% of the CSS they have there.

Thread Thread
 
alvaromontoro profile image
Alvaro Montoro

That world is definitely not real and invented πŸ˜‚.... Which makes this entry even less valid πŸ€£πŸ˜‚

Thread Thread
 
afif profile image
Temani Afif

shame on you .. You lost confidence in the power of CSS!

Thread Thread
 
alvaromontoro profile image
Alvaro Montoro

I have blind faith in CSS. I know it's the best programming language for what I do.

Collapse
 
auroratide profile image
Timothy Foster

Y'all produce these so quickly, lol πŸ˜†

Collapse
 
ananiket profile image
Aniket

Marvelous

Collapse
 
guscarpim profile image
Gustavo Scarpim

Nice work!

Collapse
 
sidcraftscode profile image
sid