Simple GSAP Timeline

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <h1 id="first">Hello there!</h1>
    <h2 id="second">How are you?</h2>
    <h3 id="third">Here is a simple animation</h3>
    
    <button type="button">Restart</button>
  </body>
</html>

window.onload = function () {
  var timeline = new TimelineLite();
  
  var h1 = document.getElementById('first');
  
  timeline
    .add('start')
    .from(h1, 0.7, { opacity: 0, ease: Power2.easeIn }, 'start')
    .from(h1, 1, { x: 200, ease: Bounce.easeOut }, 'start')
    .to('#second', 0.3, { backgroundColor: '#ffeb3b' })
    .to('#third', 0.3, { x: 200, repeat: 1, yoyo: true }, '-=0.3')
    .play();
    
  var button = document.getElementsByTagName('button');
  
  button[0].addEventListener('click', function() {
    timeline.restart();    
  });
}

#second {
  border: 1px solid gainsboro;
  padding: 5px;
  background-color: #f5f5f5;
  color: black;
}