DEV Community

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

Posted on

Upgrading the CSS only Multi-line Typewriter effect

In this post, I will enhance The Multi-line Typewriter to create more fancy variation of "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 its a bit buggy with mask when it comes to multi-line.

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


That's it!

Now you have a plenty of CSS-only typewriter effect. Enjoy 👍

The End

Discussion (13)

Collapse
afif profile image
Temani Afif Author

@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 on

^ 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 Author

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 Author

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 Author

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
Siddharth Chaudhary