Typewriters had been invented - animation

index.html

<div class="component">
  <p class="typewriter js-typewriter">
    Typewriters had been invented as early as 1714 by Henry Mill and reinvented in various forms throughout the 1800s. It was to be Sholes, however, who invented the first one to be commercially successful.
  </p>
  <button class="btn-replay" onclick="app.replay(event)">replay
  </button>
</div>

script.babel

window.app = (_ => {

  let log = console.log.bind(console),
    messageElement = document.querySelector('.js-typewriter'),
    text = messageElement.innerText.trim();

  let words = text.split(' ');
  
  let work = [];

  words.forEach(word => {
    let splitWord = word.split('').map((char, index) => {
      return `<i>${char}</i>`;
    }).join('');
    work.push(splitWord);
  });  
  
  let formattedWords = work.map((word, index) => {
    return `<span>${word}</span>`;
  }).join(' ');

  messageElement.innerHTML = formattedWords;
  messageElement.classList.add('animate');

  return {
    replay: (event) => {
      messageElement.classList.remove('animate');
      messageElement.offsetHeight; // force reflow
      setTimeout(_ => {
        messageElement.classList.add('animate');
      });
    }
  };

})();

style.scss

$duration-typing: 300ms;
$duration-background: 1000ms;
$delay-unit: 100ms;
$color: #111;
html {
  font-size: 20px;
  @media(min-width: 600px) {
    font-size: 30px;
  }
}

body {
  margin: 0;
  font-family: Courier, Helvetica, sans-serif;
  background: #fafafa;
}

.component {
  padding: .5rem;
  text-align: center;
  margin: 0 auto;
  max-width: 1000px;
  .typewriter {
    margin: .5rem;
    padding: 1rem .5rem;
    text-align: left;
    font-weight: 300;
    > span {
      display: inline-block;
    }
    &.animate {
      > span > i {
        animation: typewriter $duration-typing forwards, background $duration-background forwards;
       //  animation: typewriter $duration-typing steps(1) forwards;
      }
    }
    > span > i {
      opacity: 0;
      // display: inline-block;
      color: $color;
      font-style: normal;
      font-size: 1em;
      min-width: .4em;
      border-radius: 2px;
      @for $i from 1 through 30 {
        &:nth-of-type(#{$i}) {
          animation-delay: $i*$delay-unit;
        }
      }
    }
  }
  .btn-replay {
    padding: .5rem;
    background: white;
    border: 0;
    box-shadow: 1px 1px 2px #777;
    text-transform: uppercase;
    cursor: pointer;
  }
}

@keyframes typewriter {
  50% {
    transform: scale(1.4);
  }
  100% {
    opacity: 1;
  }
}

@keyframes background {
  0% {
    //text-shadow: 0 0 2rem $color; // expensive anim
   background: rgba($color,.1);
    //box-shadow: 0 0 4rem rgba($color,.9); // expensive anim
  }
  100% {}
}

typewriters-had-been-invented-animation.markdown

Typewriters had been invented - animation

Typewriter effect for all the words at once

A Pen by Kunuk Nykjær on CodePen.

License.