How to add pause on Typed.js rendering the strings

778 Views Asked by At

I am working on the below code. How can I add a pause before start of typing each element? As you can see in this demo Typed.js is rendering new element exactly after the back clean finishes, I want to pause there for a few and then start new elements typing.

document.addEventListener('DOMContentLoaded', function(){
      Typed.new('.type', {
        strings: ["neighbor", "family", "team", "community"],
        stringsElement: null,
        // typing speed
        typeSpeed: 60,
        // time before typing starts
        startDelay: 600,
        // backspacing speed
        backSpeed: 20,
        // time before backspacing
        backDelay: 500,
        // loop
        loop: true,
        // false = infinite
        loopCount: false,
        // show cursor
        showCursor: false,
        // character for cursor
        cursorChar: "|",
        // attribute to type (null == text)
        attr: null,
        // either html or text
        contentType: 'html',
      });
  });
.center {
  height: 100px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background:#f7f7f7;
}

span {
  font-family: Arial;
  font-size: 25px;
}
span.type {
  margin: 0 auto;
  width: 200px;
  margin-top: 100px;
}
span.type::after {
  content: "|";
  display: inline;
  animation: blink 0.7s infinite;
}

/*Removes cursor that comes with typed.js*/
.typed-cursor {
  opacity: 0;
  display: none;
}

/*Custom cursor animation*/
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.7/typed.min.js"></script>
<div class="center">
    <div class="text">
        <span>Love your </span><span class="type"></span>
    </div>
</div>

1

There are 1 best solutions below

0
Evil Ezio On

Try increasing the value of 'backDelay' to the number of milliseconds you want the typed text to be on screen.