How to create text animation with typewritter effects using anime js?

Question

Hi I am trying to create different animation with anime js, now I would like to create text animation with Typewriter Effect using anime.js, like this one here demo live.

Here is what I have so far.

HTML:

<div class="text-animation">
  Welcome to codingflag
</div>

css:

body {
  margin:0px;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#222;
}
.text-animation {
  color:#f5f5f5;
  font-size:50px;
  font-family:"Passion One",sans-serif;
  letter-spacing:1px;
}
.text-animation .letter {
  display:inline-block;
}

Here is js.

var element = document.getElementsByClassName("text-animation")[0];
element.innerHTML = element.textContent.replace(/\S/g,'<span class="letter">$&</span>');
anime.timeline({loop:true})
.add({
  targets:'.text-animation .letter',
  scale:[3,1],
  opacity:[0,1],
  translateZ:0,
  duration:1000,
  easing:"easeOutExpo",
  delay:(elem, index) => index*70
})
.add({
  targets:'.text-animation',
  opacity:0,
  duration:1000,
  delay:1000,
  easing:"easeOutExpo"
})

Here is my CODPEN: type writer effect.

What do I need to add to get the result I want as per the sample I have provided above.?

Answer 1

I recommend you to use Typed.js..because it's very easy to use...Here is an example made with Typed.js...

And here is My example...

var typed = new Typed('#text', {
    strings: ["First String..!","Second String..!","Third String..!","Third Word..!"],
    typeSpeed: 120,
    backSpeed: 80,
    loop: true
 });

body{
  padding:0;
  margin:0;
  box-sizing:border-box;
}
.container{
  background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);
  width:100vw;
  height:100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
h2{
  text-align:center;
  color:white;
}

<!--Typed.js CDN-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.5/typed.min.js"></script>

<!--Body-->
<div class="container">
  <h2 id="text"></h2>
</div>

---

Answer 2

The hardest part of this typing animation is offset calculation for cursor which can be easily done by using combination of HTMLElement.offsetLeft and HTMLElement.offsetWidth for each letter of the word.

const element = document.querySelector('.text-animation');
  const lettersHtml = element.textContent.replace(/\S/g, '<span class="letter">$&</span>');
  element.innerHTML = `<div class="letters">${lettersHtml}</div><span class="cursor"></span>`;
  element.style.display = 'block';

  const letters = Array.from(element.querySelectorAll('.letter'));
  const TYPE_AFTER_MS = 3_000;
  const JUMP_AFTER_MS = 250;

  const blink = anime({
    targets: '.text-animation .cursor',
    loop: true,
    duration: 750,
    opacity: [
      {value: [1, 1]},
      {value: [0, 0]}
    ],
  });

  anime.timeline({loop: true})
    .add({
      targets: '.text-animation .cursor',
      translateX: letters.map((letter, i) =>
        ({value: letter.offsetLeft + letter.offsetWidth, duration: 1, delay: i === 0 ? 0 : JUMP_AFTER_MS}))
    }, TYPE_AFTER_MS)
    .add({
      targets: '.text-animation .letter',
      opacity: [0, 1],
      duration: 1,
      delay: anime.stagger(JUMP_AFTER_MS),
      changeBegin: () => {
        blink.reset();
        blink.pause();
      },
      changeComplete: () => {
        blink.restart();
      }
    }, TYPE_AFTER_MS)
    .add({
      targets: '.text-animation',
      opacity: 0,
      duration: 1000,
      delay: 500,
      easing: 'easeOutExpo',
    });

body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #222;
}

.text-animation {
  display: none;
  position: relative;
  color: #f5f5f5;
  font-size: 50px;
  font-family: "Passion One", sans-serif;
  letter-spacing: 1px;
  line-height: 1;
}

.text-animation .letter {
  display: inline-block;
  opacity: 0;
}

.cursor {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #f5f5f5;
  z-index: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
<div class="text-animation">
  Welcome to codingflag
</div>