DEV Community

Cover image for Typing effect without Javascript

Typing effect without Javascript

Stokry on October 15, 2020

CSS is powerful, you can do a lot of things without JS, also it's important because it controls all design-related aspects of your website. Typogra...
Collapse
 
ekeijl profile image
Edwin • Edited

Love it! I used the feedback from the comments and tweaked it a bit:

  • Use ch as unit
  • Use the ::after pseudo to insert a vertical bar character with blink animation
  • Number of characters is configurable as CSS variable
  • I animate the width of the typed text using this trick. You can't animate from 0 to auto, but you can use max-width: 0 and then animate to a fixed number of characters: max-width: 25ch!

Collapse
 
stokry profile image
Stokry

Awesome, thanks for sharing. 😀

Collapse
 
victoroliveirab profile image
victoroliveirab

I love the CSS-only philosophy, and this code adds one more to the list! Thanks for sharing

Collapse
 
joelbonetr profile image
JoelBonetR 🥇

Same here, I wrote some posts about that too:

dev.to/joelbonetr/build-your-own-c...

There are some concerns about CSS Only that can easily handled with few JS such making css only modals to not count as window.history registry for example, but I try to handle with CSS as much as I can, specially when going for performance and pagespeed.

Collapse
 
victoroliveirab profile image
victoroliveirab

Very nice article, Joel! I'll try it myself sometime!

Collapse
 
stokry profile image
Stokry

Me too, I try to write as little Javascript as possible!

Collapse
 
veerasrivastava profile image
Veera Srivastava

💗it!
P.S.: one thing that no one has mentioned in the comments yet is that in the css of . container, rather that centering it by using that flexbox bad-boy, simply say:: __display: grid; place-items: center; __

Collapse
 
thomasverleye profile image
Thomas Verleye

Or, you could use the ch-unit explained by Lea Verou:

lea.verou.me/2012/02/simpler-css-t...

Collapse
 
stokry profile image
Stokry

Great, thank you.

Collapse
 
cboles profile image
Chris Boles

Awesome effect! Thank you for sharing.

Collapse
 
hb profile image
Henry Boisdequin

This is really cool, thanks for sharing!

Collapse
 
stokry profile image
Stokry

Thanks!

Collapse
 
louislow profile image
Louis Low

Nice!

Collapse
 
stokry profile image
Stokry

Thank you!

Collapse
 
arvindsridharan profile image
arvindsridharan

I have been looking at typewriting effect without using Javascript. Finally I understood it. Your post is awesome!!

Collapse
 
anfossistudio profile image
AnfossiStudio

Awesome trick, I love it ❤

Collapse
 
stokry profile image
Stokry

Thank you😀

Collapse
 
arturo2r profile image
ArturoDRR

Great, I am going to change my animation to this css code right now.

Collapse
 
faisalali19 profile image
Faisal Ali Sayyed

Simple and cool. Thanks for sharing buddy.

Collapse
 
brandondasilva profile image
Brandon Da Silva

Very cool! Definitely bookmarking this one, thanks for sharing!

Collapse
 
stokry profile image
Stokry

Thanks!

Collapse
 
yesabhishek profile image
Abhishek Choudhury

I had been looking for such an effect for weeks. Thanks a lot mate👏

Collapse
 
stokry profile image
Stokry

Thank you!

Collapse
 
alexlsalt profile image
Alex Morton

So cool! And so simple! Thank you for sharing!!

Collapse
 
stokry profile image
Stokry

Thanks 😃

Collapse
 
0x04 profile image
Oliver Kühn

Yeah! Well, I think there is a lot room of doing stuff with that idea: codepen.io/0x04/details/mdVKpPN

Collapse
 
stokry profile image
Stokry

Cool😀

Collapse
 
dallgoot profile image
dallgoot

i think you can put the "blink" animation on a ".type:after" so it follows the last character