Multiline Typewriter Effect with Two Consistent Words

Question

I\'m trying to create a typewriter effect that pauses at the end of a statement, deletes most of each statement but keeps the first two words, and finished with just those t

Answer 1

The best lib doing this : https://typeitjs.com/ But please provide code if you need help like this

Answer 2

Solution 1: jQuery and Typed

Using jQuery and Typed, you can do this:

$(".element").typed({strings: [
    "I am a ^100Linux fan.^1000", 
    "I am an ^200UX expert.^2000", 
    "I am a ^200programmer.^1000", 
    "I am a ^200web developer.^500"
  ],
  typeSpeed: 20,
  callback: function(){ $(".typed-cursor").css('visibility','hidden');}
});

https://mattboldt.com/demos/typed-js/

You can use this software for free. It has an MIT license.

IMPORTANT This is an easy solution that requires a bulky library (jQuery) and has poor accessibility. Not very suitable for production, but a nice way to trow something together in a quick and dirty kind of way. If you are serious about using this effect I would go for the CSS only solution below.

---

Solution 2: CSS only

Using CSS, you can do something like this: https://css-tricks.com/snippets/css/typewriter-effect/. However, I would rather use CSS animation with states like this, so it does not rely on a monospaced font:

@keyframes words {
  0% {content: "I";}
  17% {content: "I ";}
  34% {content: "I a";}
  50% {content: "I am";}
  67% {content: "I am ";}
  84% {content: "I am a";}
  100% {content: "I am a ";}
}
@keyframes changeLetter {
  0% {content: "";}
  5% {content: "C";}
  10% {content: "CS";}
  15% {content: "CSS";}
  20% {content: "CSS ";}
  25% {content: "CSS f";}
  30% {content: "CSS fa";}
  35% {content: "CSS fan";}
  40% {content: "CSS fan.";}
  54% {content: "CSS fan.";}      
  55% {content: "CSS fan";}
  56% {content: "CSS fa";}
  57% {content: "CSS f";}
  58% {content: "CSS f";}
  59% {content: "CSS ";}
  60% {content: "CSS";}
  61% {content: "CS";}
  62% {content: "C";}
  62% {content: "";}
  75% {content: "n";}
  80% {content: "ne";}
  85% {content: "ner";}
  90% {content: "nerd";}
  95% {content: "nerd.";}
  100% {content: "nerd.";}
}
@keyframes cursor {
  0% {content: "";}
  50% {content: "|";}
  100% {content: "";}
}
.words::before {
  animation: words 1s linear 0s 1 normal forwards;
  content: "";
}
.letter-changer::before {
  animation: changeLetter 3s linear 1s 1 normal forwards;
  content: "";
}
.letter-changer::after {
  animation: cursor 0.6s linear 2.2s 1 normal forwards, cursor 0.6s linear 4s 3 normal forwards;
  content: "|";
}
.accessibility {
  width: 0; 
  display: inline-block; 
  overflow: hidden; 
  white-space:nowrap;
}

<span class="words"></span><span class="letter-changer"></span><span class="accessibility">I am a <s>CSS fan.</s>nerd.</span>

I have added a blinking cursor to the ::after element. I got inspiration for this solution from: https://css-tricks.com/animating-the-content-property/.

IMPORTANT This solution does not force you to double the size of your page by loading 100kb of jQuery. It is accessible for screen readers and search engines. It works with all fonts. And finally... the effect will run on any modern browser, even ones without javascript (or with javascript disabled).