Comments on: Typewriter Animation That Handles Anything You Throw at It https://css-tricks.com/typewriter-animation-that-handles-anything-you-throw-at-it/ Tips, Tricks, and Techniques on using Cascading Style Sheets. Thu, 09 Sep 2021 14:24:45 +0000 hourly 1 https://wordpress.org/?v=6.5.5 By: James https://css-tricks.com/typewriter-animation-that-handles-anything-you-throw-at-it/#comment-1782252 Thu, 09 Sep 2021 14:24:45 +0000 https://css-tricks.com/?p=344497#comment-1782252 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 https://css-tricks.com/typewriter-animation-that-handles-anything-you-throw-at-it/#comment-1777133 Wed, 28 Jul 2021 15:20:45 +0000 https://css-tricks.com/?p=344497#comment-1777133 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 https://css-tricks.com/typewriter-animation-that-handles-anything-you-throw-at-it/#comment-1777131 Wed, 28 Jul 2021 15:10:06 +0000 https://css-tricks.com/?p=344497#comment-1777131 In reply to David McKelvey.

Nice one! The only thing it misses is a cursor. :)

]]> By: Murtuzaali Surti https://css-tricks.com/typewriter-animation-that-handles-anything-you-throw-at-it/#comment-1777118 Wed, 28 Jul 2021 14:45:50 +0000 https://css-tricks.com/?p=344497#comment-1777118 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 https://css-tricks.com/typewriter-animation-that-handles-anything-you-throw-at-it/#comment-1777102 Wed, 28 Jul 2021 07:39:21 +0000 https://css-tricks.com/?p=344497#comment-1777102 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 https://css-tricks.com/typewriter-animation-that-handles-anything-you-throw-at-it/#comment-1777072 Tue, 27 Jul 2021 15:53:46 +0000 https://css-tricks.com/?p=344497#comment-1777072 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 https://css-tricks.com/typewriter-animation-that-handles-anything-you-throw-at-it/#comment-1776982 Sat, 24 Jul 2021 13:39:27 +0000 https://css-tricks.com/?p=344497#comment-1776982 awesome! will try it on my portfolio website!

]]> By: David McKelvey https://css-tricks.com/typewriter-animation-that-handles-anything-you-throw-at-it/#comment-1776873 Thu, 22 Jul 2021 14:38:55 +0000 https://css-tricks.com/?p=344497#comment-1776873 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 https://css-tricks.com/typewriter-animation-that-handles-anything-you-throw-at-it/#comment-1776751 Tue, 20 Jul 2021 19:06:36 +0000 https://css-tricks.com/?p=344497#comment-1776751 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 https://css-tricks.com/typewriter-animation-that-handles-anything-you-throw-at-it/#comment-1776745 Tue, 20 Jul 2021 17:58:42 +0000 https://css-tricks.com/?p=344497#comment-1776745 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 .

]]>