javascript - how to make divs fly from one container to another container using greensock.js? -

i trying create ui on click tiles [sub-divs] move 1 parent div parent div. have created pen explain question.the pen working fine need know how show them moving, animation. want them fly 1 one on click. used greensock.js before don't have idea how use in case, or can use here?

$(".mybox").on('click', function() {    $(this).css('background', 'red');    $(this).detach();    $(this).appendto("#two");      var p = $("#two");    var position = p.position();     tweenlite.to(this, 0.5, {x:position.left, y:position.right});  });

#one {            width: 200px;            height: 200px;            float: left;            background: rgba(255,40,100,0.5);;          }          #two {            margin-left: 300px;            width: 200px;            height: 200px;            background: rgba(0,240,10,0.5);          }          .mybox {            float:left;            width: 50px;            height: 50px;            background: rgb(255,0,0);            margin: auto auto;          }

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/tweenmax.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/tweenmax.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/easing/easepack.min.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="one">           <div id="content" class="mybox">              1           </div>           <div id="content" class="mybox">              2           </div>           <div id="content" class="mybox">              3           </div>           <div id="content" class="mybox">              4           </div>           <div id="content" class="mybox">             5           </div>        </div>          <div id="two">        </div>