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

Question

I am trying to create UI where on click tiles [sub-divs] move from one parent div to another parent div. I have created a pen to explain the question.The pen is working fine but now I need to know how to show them moving, animation. I want them to fly one by one on click. I used greensock.js before but I don't have any idea how to use it in this case, or can I use it 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>

Answer 1

One way to animate an element between containers is to use absolute positioning during the transition:

1. First measure the element's existing absolute position relative to the parent/window, using JQuery methods.

// Find starting position relative to parent
var offsetFrom = $(this).offset();  
// Take into account the scroll position  
offsetFrom.top -= $(this).parent().scrollTop(); 
offsetFrom.left -= $(this).parent().scrollLeft(); 

2. Move the element to the new container and measure the absolute position again.

$(this).appendTo('#two');
// Find end position relative to parent
var offsetTo = $(this).offset();
// Take into account the scroll position  
offsetTo.top -= $(this).parent().scrollTop(); 
offsetTo.left -= $(this).parent().scrollLeft(); 

3. Switch the element's CSS to be absolutely positioned and use GSAP to animate between the 2 positions using the left and top properties.

TweenLite.set(this, {position:'absolute'}); // Set CSS using GSAP for convenience
TweenLite.fromTo(this, 0.5, offsetFrom, offsetTo); // Animate

4. When complete restore the element's original CSS, ready for the next animation.

TweenLite.set(ele, {position:'relative',left:'auto',top:'auto'})

See it working here:
https://codepen.io/loxks/pen/YzJeaWb