<button class="start">Start Animation</button>
<h1>CHANGE THE HEADLINE.</h1>

body {
  margin: 20px;
  font-family: 'Lato';
  font-weight: 300;
  text-align: center;
}

h1 {
  font-size: 3em;
  font-weight: 900;
}

h1 .earth {
  color: lightgreen;
  text-shadow: 2px 2px 0 black, -2px -2px 0 black;
}

h1 .water {
  color: lightblue;
  text-shadow: 2px 2px 0 black, -2px -2px 0 black;
}

button {
  background: wheat;
  border: 1px solid black;
  font-family: 'Lato';
  border-radius: 5px;
  padding: 8px;
  margin: 20px 0;
  outline: none;
  cursor: pointer;
}

var heading = document.querySelector("h1");
var startButton = document.querySelector(".start");

var animateHeading = KUTE.to(
  heading,
  { text: '70% SURFACE OF <span class="earth">EARTH</span> IS COVERED WITH <span class="water">WATER</span>.' },
  { duration: 10000, textChars: 'upper' }
);

startButton.addEventListener(
  "click",
  function() {
    animateHeading.start();
  },
  false
);