GSAP START with Timeline

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script data-require="gsap@*" data-semver="1.9.0" src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/TimelineLite.min.js"></script>
    <script data-require="gsap@*" data-semver="1.9.0" src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/TweenLite.min.js"></script>
    <script data-require="gsap@*" data-semver="1.9.0" src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/plugins/CSSPlugin.min.js"></script>
    <script data-require="gsap@*" data-semver="1.9.0" src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/easing/EasePack.min.js"></script>
    <script data-require="gsap@*" data-semver="1.9.0" src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/TimelineMax.min.js"></script>
    <!--<script data-require="gsap@*" data-semver="1.9.0" src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/TimelineMax.min.js"></script>
    <script data-require="gsap@*" data-semver="1.9.0" src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/plugins/TextPlugin.min.js"></script>
    <script data-require="gsap@*" data-semver="1.9.0" src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/plugins/ScrollToPlugin.min.js"></script>
    <script data-require="gsap@*" data-semver="1.9.0" src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/plugins/RoundPropsPlugin.min.js"></script>
    <script data-require="gsap@*" data-semver="1.9.0" src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/plugins/RaphaelPlugin.min.js"></script>
    <script data-require="gsap@*" data-semver="1.9.0" src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/plugins/EaselPlugin.min.js"></script>
    <script data-require="gsap@*" data-semver="1.9.0" src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/plugins/DirectionalRotationPlugin.min.js"></script>
    <script data-require="gsap@*" data-semver="1.9.0" src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/plugins/ColorPropsPlugin.min.js"></script>
    

    <script data-require="gsap@*" data-semver="1.9.0" src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/plugins/BezierPlugin.min.js"></script>
    <script data-require="gsap@*" data-semver="1.9.0" src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/plugins/AttrPlugin.min.js"></script>
    <script data-require="gsap@*" data-semver="1.9.0" src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/jquery.gsap.min.js"></script>
    <script data-require="gsap@*" data-semver="1.9.0" src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/easing/EasePack.min.js"></script>
    <script data-require="gsap@*" data-semver="1.9.0" src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/TweenMax.min.js"></script>
    <script data-require="gsap@*" data-semver="1.9.0" src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/TimelineLite.min.js"></script>
    <script data-require="gsap@*" data-semver="1.9.0" src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/plugins/CSSRulePlugin.min.js"></script>
    -->
    <link rel="stylesheet" href="style.css" />

  </head>

  <body>
    <h1>GSAP START with Timeline</h1>

  <div class="buttonBox">
    <button id="playBtn" >Play</button>
    <!--<button id="pauseBtn" >Pause</button>-->
    <!--<button id="stopBtn" >Stop</button>-->
    <button id="reverseBtn" >Reverse</button>
    <button id="restartBtn" >Restart</button>
  </div>
  <div class="basicTweenBox">
    <img id="css3Icon" src="https://cdn4.iconfinder.com/data/icons/flat-brand-logo-2/512/css3-256.png"      />
    <img id="html5Icon" src="https://cdn4.iconfinder.com/data/icons/flat-brand-logo-2/512/html5-256.png"    />
    <img id="html5Icon2" src="https://cdn1.iconfinder.com/data/icons/social-icon-2-1/512/social_style_2_html5-256.png"      />
  </div> 

  <script src="script.js">
    
  </script>    
  </body>

</html>

// Code goes here
    var icon1 = $("#css3Icon");
    var icon2 = $("#html5Icon");
    var icon3 = $("#html5Icon2");
    var playBtn = $("#playBtn");
    //var stopBtn = $("#stopBtn");
    //var pauseBtn = $("#pauseBtn");
    var reverseBtn = $("#reverseBtn");
    var restartBtn = $("#restartBtn");
    
    
    $(window).load(function(){
        init()
    });
   
   function init(){
     //var _timeline = new TimelineLite({paused:true});
     var _timeline = new TimelineMax({paused:true});
    /* _timeline.add(getTween(icon1,.5,.5,1));
     _timeline.add(getTween(icon2,2,.5,2));
     _timeline.add(getTween(icon3,2,1,3));
    */
    
    _timeline.to(icon1,1,{delay:1,x:500,y:0,rotationY:360,opacity:0,scale:1.5,ease:Linear.easeInOut }) ;
    
     (playBtn).click(function(){
          _timeline.paused(!_timeline.paused());
          playBtn.html(_timeline.paused() ? "Play" : "Pause" );
     });

     reverseBtn.click(function(){
        _timeline.reverse();
     });
     
     restartBtn.click(function(){
        _timeline.restart();
     });
   } 
   
   function getTween(elem,speed,delay,tweenOptions){
     var tween;
      if(elem){
         switch(tweenOptions){
           case 1: tween = TweenLite.to(elem,speed,{delay:delay,x:500,y:0,rotationY:360,opacity:0,scale:1.5,ease:Linear.easeInOut }); break;
           case 2: tween = TweenLite.to(elem,speed,{delay:delay,x:500,y:500,rotation:360,opacity:0,scale:2,ease:Bounce.easeInOut}); break;
           case 3: tween = TweenLite.to(elem,speed,{delay:delay,x:0,y:500,rotationX:360,opacity:0,scale:1.5,ease:Elastic.easeInOut}); break;
           default: tween = TweenLite.to(elem,speed,{delay:delay,x:500,y:0,opacity:0,scale:1}); break;
         }
      }
      return tween;
   }

/* Styles go here */

.basicTweenBox img{
  width:128px;
  height:128px; 
}

.basicTweenBox{
  display:block;
}

.tweenTitle h3{
  color:green;
}

.buttonBox{
  display:inline-block;
}
.buttonBox button{
   font-size:10px; 
  padding:1px;
  margin:0 2px;
  width:50px;
  cursor:pointer;
}

Getting Started with GSAP