Cacher is the code snippet organizer for pro developers

https://codepen.io/hassifow/pen/RYgyeZ

----------------html----------------

<h1><span id="staticText">Te ajudamos a economizar para <br/> <span id="typeline" ></span></span></h1>

-------------javascript-------------

/ auto typing effect

function write(obj, sentence, i, cb) {
  if (i != sentence.length) {
    setTimeout(function () {
      i++
      console.log('in timeout', i)
      obj.innerHTML = sentence.substr(0, i + 1) + ' <em aria-hidden="true"></em>';
      write(obj, sentence, i, cb)
    }, 50)
  } else {
    console.log(i)
    cb()
  }
}

function erase(obj, cb, i) {
  var sentence = obj.innerText
  if (sentence.length != 0) {
    setTimeout(function () {
      sentence = sentence.substr(0, sentence.length - 1)
      console.log('in timeout', i)
      obj.innerText = sentence
      erase(obj, cb)
    }, 18 / (i * (i / 10000000)))
  } else {
    obj.innerText = " "
    cb()
  }
}
var typeline = document.querySelector("#typeline")

function writeerase(obj, sentence, time, cb) {
  write(obj, sentence, 0, function () {
    setTimeout(function () {
      erase(obj, cb)
    }, time)
  })
}

var sentences = [
  "pagar uma dívida",
  "viajar para o exterior",
  "viver melhor",
  "trocar de carro",
  "comprar a casa própria",
  "fazer investimentos",
  "ser independente"
]

var counter = 0

function loop() {
  var sentence = sentences[counter % sentences.length]
  writeerase(typeline, sentence, 1000, loop)
  counter++
}

loop()

// auto typing effect

-------------scss-------------

/* auto typing effect */

#typeline {
  display: block;
  height: 40px;
  width: 100%;
  margin-bottom: 0;

  @media only screen and (min-width: 850px) {
    margin-bottom: 35px;
  }

  em {
    border-right: .1em solid #fff;
    width: 20ch;
    white-space: nowrap;
    overflow: hidden;
    margin-top: 0;
    color: #3295dd;
    -webkit-animation: typing 3s steps(21, end),
      blink-caret .5s step-end infinite alternate;
  }
}

@-webkit-keyframes blink-caret {
  50% {
    border-color: transparent;
  }
}

/* auto typing effect */