▼
Streaming live at 10am (PST)

How to create multi-lined Typed Text Effect?

Design help Custom code
#1

Hi there! I am using Typed.js to attempt to make my site look like an old DOS boot screen.

I found the proper code here: typing-text-typedjs - Webflow

However, I want to make my text multi-lined / bulk text. I found what looks to be the right code to do that, but it does not seem to work.

Currently text comes in, then deletes itself then new line replaces it. I want Line 1 appear > break > Line 2 appear > etc…

EX.
Hi I am JP
I like design
Blah Blah Blah

Appreciate the help!

    <style>
/* add custom cursor */
.typed-words::after {
  content: "|";
  display: inline;
  animation: blink 1s infinite;
}

/* custom cursor animation */
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.10/typed.min.js"></script>

<script>
var typed = new Typed(".typed-words", {
  strings: [
    "git push --force ^1000\n `pushed to origin with option force`"]
  typeSpeed: 75,
  backSpeed: 50,
  backDelay: 800,
  startDelay: 500,
  loop: true,
  showCursor: false,
  cursorChar: "|",
  attr: null,
});
</script>

Here is my site Read-Only: Webflow - JP's Dynamite Project

#2

Hey @jpfaraj
I had a project with simmilar requirement, you can do it by pasting both of these codes into your before tag. When you are typing out text you have to type it out in a single line with
to make it go to next line, don’t try to force typing into next row by pressing shift enter or something.

<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.10/typed.min.js"></script>

  <script>
  var typed = new Typed(".typed-words", {
  strings: ["Hi I am JP <br> I like Design <br> Blah Bllah Blah"],
  typeSpeed: 1.5,
  startDelay: 1000,
  loop: false,
  showCursor: false,
  cursorChar: "|",
  attr: null,
});
</script>

Let me know if this helps or if you need any more assistance, cheers.