Greensock - tween delay

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<div id="bar"></div>
<div style="left: 0px;" id="img1" class="logo"></div>
<div style="left: 0px;" id="img2" class="logo"></div>
<div style="left: 0px;" id="img3" class="logo"></div>
<div style="left: 0px;" id="img4" class="logo"></div>
<div style="left: 0px;" id="img5" class="logo"></div>

<button aria-disabled="false" role="button" id="btn"><span>tween</span>

</button>

CSS

body {
      background-color:#000;
  }
  .logo {
      position: relative;
      background: url('http://lorempixel.com/100/100/') no-repeat scroll 0% 0% transparent;
      height:100px;
      width: 100px;
  }
#bar{
    background-color:#91e500;
    color:black;
    position:relative;
    width:100px;
    height:10px;
    }

JavaScript

$('#btn').on('click', function () {
    //alert('clicked');
    var logo = document.getElementById("logo"),
    		img1 = document.getElementById("img1"),
        img2 = document.getElementById("img2"),
        img3 = document.getElementById("img3"),
        img4 = document.getElementById("img4"),
        img5 = document.getElementById("img5"),
        bar = document.getElementById("bar");
    
  //(element, duration, {move x px, tweet type})
  //TweenLite.to(logo, 2,{left:"240px",ease:Bounce.easeOut});
    
    //delay
    var tl = new TimelineLite();
    tl.from(img1, 0.5, { width: "20px" }, "0.1");
    tl.from(img2, 0.5, { width: "20px" }, "0.2");
    tl.from(img3, 0.5, { width: "20px" }, "0.3");
    tl.from(img4, 0.5, { width: "20px" }, "0.4");
    tl.from(img5, 0.5, { width: "20px" }, "0.5");
    


 
});