DEV Community

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...

Read full post

Edwin • Oct 15 '20 • 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!

Stokry • Oct 15 '20

Awesome, thanks for sharing. 😀

victoroliveirab • Oct 15 '20

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

JoelBonetR 🥇 • Oct 16 '20

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.

victoroliveirab • Oct 17 '20

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

Stokry • Oct 15 '20

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

Thomas Verleye • Oct 15 '20

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

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

Stokry • Oct 15 '20

Great, thank you.

Veera Srivastava • Dec 6 '20

💗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; __