<div id="text-spot">
      <div id="inner-text">

      </div>
  <form id="custom-text-form">
        <input type="text" id="custom-text" placeholder="customize this text">
        <input type="submit" value="go!">
      </form>
    </div>
@keyframes dash {
        0% {
          transform: skew(-30deg,0deg) translateX(300%) scale(.8);
          opacity: 1;
        }

        40% {
          transform: skew(10deg,0deg) translateX(100%) scale(.9);
        }

        60% {
          transform: skew(10deg,0deg) translateX(-10px) scale(1.2);
        }

        70% {
          transform: skew(0,0deg) translateX(0) scale(1.3);
        }

        75% {
          transform: skew(0,0deg) translateX(0) scale(1.3);
        }

        90% {
          transform: skew(0,0deg) translateX(0) scale(.85);
        }

        100% {
          transform: translateY(0) scale(1);
          opacity: 1;
        }
      }


      @keyframes done-animating {
        0% {
          transform: scale(1);
        }

        50% {
          transform: scale(2);
        }

        100% {
          transform: scale(1);
        }
      }

      body {
        background: #0b0b25;
      }

      #inner-text {
        position: relative;
        z-index: 1;
      }

      #inner-text.done-animating {
        animation: done-animating 300ms ease-in;
      }

      #text-spot {
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
      }

      .letter {
        display: inline-block;
        font-size: 120px;
        color: #ffdc2e;
        letter-spacing: 10px;
        font-family: 'Luckiest Guy';
      }

      .letter.animate {
        animation: dash 500ms ease-in forwards;
        opacity: 0;
      }
document.addEventListener('DOMContentLoaded', function () {
        function drawText(word) {
          word = word || 'ZOOM!';
          var wordArray = word.split('');
          var innerTextElement = document.getElementById('inner-text');
          innerTextElement.innerHTML = '';
          innerTextElement.classList.remove('done-animating');
          wordArray.forEach(function (letter, index) {
            var span = document.createElement('span');
            span.textContent = letter;
            span.className = 'letter animate';
            span.style['animation-delay'] = (300 * index) + 'ms';
            innerTextElement.appendChild(span);

            if (index === wordArray.length - 1) {
              span.addEventListener('animationend', function () {
                innerTextElement.classList.add('done-animating');
              });
            }
          });
        }

        document.getElementById('custom-text-form').addEventListener('submit', function (e) {
          e.preventDefault();
          e.stopPropagation();

          drawText(document.getElementById('custom-text').value);
        });

        drawText();
      });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.