Comments on: Typewriter Animation That Handles Anything You Throw at It

By: James

James — Thu, 09 Sep 2021 14:24:45 +0000

looks really nice with the cursor (more pleasant for the eyes than kevins one),
but does not live up to the promise ‘handles anything you throw at it’.
for example, wrapping text causing strange effects.

why did you went this complicated way?
keep it always simple https://jsfiddle.net/a1ws4poL/

By: Murtuzaali Surti

Murtuzaali Surti — Wed, 28 Jul 2021 15:20:45 +0000

In reply to Ian. Yes you can, but my main intention was to recreate Kevin Powell's animation using JavaScript. There are always multiple approaches that you can go for!

By: Murtuzaali Surti

Murtuzaali Surti — Wed, 28 Jul 2021 15:10:06 +0000

In reply to David McKelvey. Nice one! The only thing it misses is a cursor. :)

By: Murtuzaali Surti

Murtuzaali Surti — Wed, 28 Jul 2021 14:45:50 +0000

In reply to Sebastian. Hey Sebastian, it's true that it won't work on smaller viewport sizes. In order to overcome this situation, you can create separate div's for certain words and animate them too as soon as earlier animations get completed using .onfinish method in JavaScript.

By: Sebastian

Sebastian — Wed, 28 Jul 2021 07:39:21 +0000

Awesome Animation. Sadly it didn’t work on mobile verticality.
As soon as it needs two rows, the animation will show half of a letter.

Still fun to watch.

By: Matt

Matt — Tue, 27 Jul 2021 15:53:46 +0000

In reply to David McKelvey. Hey i have watched the whole animation on your Web page. It was a really Nice experience, i was hypnotized and always eager to see what would come next. Good job really!

By: aliefseventri

aliefseventri — Sat, 24 Jul 2021 13:39:27 +0000

awesome! will try it on my portfolio website!

By: David McKelvey

David McKelvey — Thu, 22 Jul 2021 14:38:55 +0000

I like this. I’ve done something similar but sought to have the typing feel more like it was being typed as if there were someone typing it for you in real time by introducing some randomness. I’d be happy to share my code if there’s interest. (It’s old enough I wrote it in CoffeeScript and would want to rewrite it.) My version can be seen on my very old home page:

https://hello.mckelveycreative.com/

By: Ian

Ian — Tue, 20 Jul 2021 19:06:36 +0000

At this point you could just let JavaScript really type it out, so you wouldn’t need the monospace font or solid background.

By: Geni Jaho

Geni Jaho — Tue, 20 Jul 2021 17:58:42 +0000

Awesome implementation. I’ve tried to do the same thing for highlighted text, for example code blocks, but most I could do was this https://dev.to/genijaho/typewriter-animation-using-vanilla-js-and-highlight-js-1ecc. It’s not the real feel of a typewriter, but that’s as far as my JS skills go .