<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;
}

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 Earth is Covered with Water.' },
  { duration: 5000}
);

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

External CSS

  1. https://fonts.googleapis.com/css?family=Lato:300,900

External JavaScript

  1. https://cdn.jsdelivr.net/kute.js/1.6.2/kute.min.js
  2. https://cdn.jsdelivr.net/kute.js/1.6.2/kute-text.min.js