Multiline Typewriter Effect with Two Consistent Words

Multiline Typewriter Effect with Two Consistent Words

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>

Loop CSS typewriter effect and change text

Yes you will need some script, at least to detect the end of the animations. Then to refresh html content,you can store all the messages to display in an array and loop through it. Then you have to adjust the speed, depending on the length of the text displayed.

var messages=["message1","message2  message2 message2","message3 message3"];var rank=0;
// Code for Chrome, Safari and Operadocument.getElementById("myTypewriter").addEventListener("webkitAnimationEnd", changeTxt);
// Standard syntaxdocument.getElementById("myTypewriter").addEventListener("animationend", changeTxt);
function changeTxt(e){  _h1 = this.getElementsByTagName("h1")[0];  _h1.style.webkitAnimation = 'none'; // set element animation to none   setTimeout(function() { // you surely want a delay before the next message appears      _h1.innerHTML=messages[rank];      var speed =3.5*messages[rank].length/20; // adjust the speed (3.5 is the original speed, 20 is the original string length      _h1.style.webkitAnimation = 'typing '+speed+'s steps(40, end), blink-caret .75s step-end infinite'; //  switch to the original set of animation            (rank===messages.length-1)?rank=0:rank++; // if you have displayed the last message from the array, go back to the first one, else go to next message    }, 1000);}

.typewriter h1 {  overflow: hidden; /* Ensures the content is not revealed until the animation */  border-right: .15em solid orange; /* The typwriter cursor */  white-space: nowrap; /* Keeps the content on a single line */  margin: 0 auto; /* Gives that scrolling effect as the typing happens */  letter-spacing: .15em; /* Adjust as needed */  animation:   typing 3.5s steps(40, end),  blink-caret .75s step-end infinite;}

body {  background: #333;  color: #fff;  font-family: monospace;  padding-top: 5em;  display: flex;  justify-content: center;}

/* The typing effect */@keyframes typing {  from { width: 0 }  to { width: 100% }}
/* The typewriter cursor effect */@keyframes blink-caret {  from, to { border-color: transparent }  50% { border-color: blue; }}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="typewriter" id="myTypewriter">  <h1>The cat and the hat.</h1></div>

How to setup multiline typing effect for react with delay between lines

You need to use an asynchronous approach for this kind of tasks ( I did not check your typing effect logic, I just made the whole process asynchronous ):

import React from "react";

type MyProps = {};
type MyState = {
  introArray: string[];
};
class Terminal extends React.Component<MyProps, MyState> {
  state: MyState = {
    introArray: []
  };

  componentDidMount() {
    // Data to import from sanity
    const starterArray = [
      "The very first line that needs to finish typing before going to the next line",
      "The second line that needs to start being typed after the first line"
    ];

    const createTypingEffect = async (text: string, index: number) => {
      return Promise.all(
        text.split("").map(
          (c, i) =>
            new Promise((res) => {
              setTimeout(() => {
                let arrayCopy = this.state.introArray.slice();
                this.setState((state) => ({
                  introArray: [
                    ...state.introArray.slice(0, index),
                    arrayCopy[index] + c,
                    ...state.introArray.slice(index + 1)
                  ]
                }));
                res(null);
              }, 100 * i);
            })
        )
      );
    };

    const cycle = async () => {
      let i = 0;
      for (const starterText of starterArray) {
        // Setting empty string for each line in starterArray so we dont get undefined as first character
        this.setState((state) => ({
          introArray: [...state.introArray, ""]
        }));

        await createTypingEffect(starterText, i);
        i++;
      }
    };

    cycle();
  }
  render() {
    console.log(this.state.introArray);
    return (
      <div className="w-1/2 h-1/2 p-5 flex items-start justify-start bg-clip-padding bg-slate-900 backdrop-filter backdrop-blur-xl bg-opacity-60 border border-gray-900 rounded">
        <div className="flex flex-col">
          {this.state.introArray.map((introLine, index) => (
            <div className="flex items-center" key={index}>
              <p className="text-white">{introLine}</p>
            </div>
          ))}
        </div>
      </div>
    );
  }
}

export default Terminal;

You can use several approaches to handle the async logic, I used a Promise.all approach here, giving an incremental timer to the timeout, just to follow what you were doing. An alternative solution is to use a simple for...of loop and await for a promisified timeout inside. That way you don't need to give an incremental time to the timeout, since they will be executed relatively synchronously.

The working demo is HERE
( Working snippet can't be added here since SO has no TS support)

Typewriter CSS Animation in table

You can try that. Remove fixed width from intro container and give this into description. And for centering you can add margin: 0 auto into intro.

#intro{
  display: table;
  height: 100vh;
  margin: 0 auto;
  .intro-description{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100vw;
  }
}

Codepen: http://codepen.io/anon/pen/WGydqj

CSS3 typewriter effect

you can try like this -

p{  color: #000;     font-size: 20px;  margin: 10px 0 0 10px;  white-space: nowrap;  overflow: hidden;  width: 30em;  animation: type 4s steps(60, end); }
p:nth-child(2){  animation: type2 4s steps(30, end);}
p:nth-child(3){  animation: type3 6s steps(60, end);}

@keyframes type{   from { width: 0; } } 
@keyframes type2{  0%{width: 0;}  50%{width: 0;}  100%{ width: 100; } } 
@keyframes type3{  0%{width: 0;}  50%{width: 0;}  100%{ width: 100; } } 

<p class='css-typing'>To save their world</p><p class='css-typing'>They must come to ours</p><p class='css-typing'>Spongebob out of water</p>

Typewriter effect goes full width

You can wrap the paragraph text within a container and give it a width: max-content

App.js:

export default function App() {
  return (
    <div>
      <p className="title">This piece of text is fixed</p>
      <div className="typewriter-container"> <!-- Wrapper -->
        <p className="typewriter">typewriter text</p>
      </div>
    </div>
  );
}

CSS:

.typewriter-container {
  width: max-content;
}

Demo:

Output:

https://imgur.com/a/YiSsr6h

Typewriter Effect with jQuery

demo: http://jsbin.com/araget/5/

/*** Plugin ***/

(function($) {
  // writes the string
  //
  // @param jQuery $target
  // @param String str
  // @param Numeric cursor
  // @param Numeric delay
  // @param Function cb
  // @return void
  function typeString($target, str, cursor, delay, cb) {
    $target.html(function(_, html) {
      return html + str[cursor];
    });

    if (cursor < str.length - 1) {
      setTimeout(function() {
        typeString($target, str, cursor + 1, delay, cb);
      }, delay);
    } else {
      cb();
    }
  }

  // clears the string
  //
  // @param jQuery $target
  // @param Numeric delay
  // @param Function cb
  // @return void
  function deleteString($target, delay, cb) {
    var length;

    $target.html(function(_, html) {
      length = html.length;
      return html.substr(0, length - 1);
    });

    if (length > 1) {
      setTimeout(function() {
        deleteString($target, delay, cb);
      }, delay);
    } else {
      cb();
    }
  }

  // jQuery hook
  $.fn.extend({
    teletype: function(opts) {
      var settings = $.extend({}, $.teletype.defaults, opts);

      return $(this).each(function() {
        (function loop($tar, idx) {
          // type
          typeString($tar, settings.text[idx], 0, settings.delay, function() {
            // delete
            setTimeout(function() {
              deleteString($tar, settings.delay, function() {
                loop($tar, (idx + 1) % settings.text.length);
              });
            }, settings.pause);
          });

        }($(this), 0));
      });
    }
  });

  // plugin defaults  
  $.extend({
    teletype: {
      defaults: {
        delay: 100,
        pause: 5000,
        text: []
      }
    }
  });
}(jQuery));

/*** init ***/

$('#target').teletype({
  text: [
    'Lorem ipsum dolor sit amet, consetetur sadipscing elitr,',
    'sed diam nonumy eirmod tempor invidunt ut labore et dolore',
    'magna aliquyam erat, sed diam voluptua. At vero eos et',
    'accusam et justo duo dolores et ea rebum. Stet clita kasd',
    'gubergren, no sea takimata sanctus est Lorem ipsum dolor sit',
    'amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,',
    'sed diam nonumy eirmod tempor invidunt ut labore et dolore',
    'magna aliquyam erat, sed diam voluptua. At vero eos et accusam',
    'et justo duo dolores et ea rebum. Stet clita kasd gubergren,',
    'no sea takimata sanctus est Lorem ipsum dolor sit amet.'
  ]
});

$('#cursor').teletype({
  text: ['_', ' '],
  delay: 0,
  pause: 500
});

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

<span id="target"></span>
<span id="cursor"></span>
<!-- used for the blinking cursor effect -->

---

Related Topics