Why Animation is not happening as expected to place box to bottom

Question

I'm trying to perform animation on click of box which is expected as below

1. When box is clicked it must move to the right to either 300px or right most then it should go to the bottom.

Note: if it is achieved using tweenMax (GSAP). Then solution is most welcomed.

As described in image:

Here is codepen:https://codepen.io/anon/pen/ajXqLL

$(function(){
  $('.box').on('click',function(){
      $('#wrapper').append(this);
      $(this).addClass('elementToAnimate');
   });
});

		div.box{
		  height: 100px;
		  width: 200px;
		  background:red;
		  display: inline-block;
		  text-align:center;
		  color:#fff;
		  font-size:26px;
		  margin: 0px;
		  float: left;
		}
		div.box:active{
		  background:yellow;
		}
		div.box2{
		  background:green;
		}
		div.box3{
		  background:orange;
		}


     
@keyframes yourAnimation{
    0%{
        transform: translateX(100px) translateY(20%);
        }
    40%{
        transform: rotate(xx) translateX(120px) translateY(40%);
        }

     60%{
        transform: rotate(xx) translateX(150px) translateY(50%);
        }

      80%{
        transform: rotate(xx) translateX(200px) translateY(90%);
        }

}

.elementToAnimate{
    animation: yourAnimation 3s forwards 0s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
	    <div class="box">1</div>
	    <div class="box">2</div>
	    <div class="box">3</div>
	    <div class="box">4</div>
	    <div class="box">5</div>
	    <div class="box">6</div>
	    <!-- for box 2 -->
	    <div class="box box2">7</div>
	    <div class="box box2">8</div>
	    <div class="box box2">9</div>
	    <div class="box box2">10</div>
	    <div class="box box2">11</div>
	    <div class="box box2">12</div>
	    <!-- for box 3-->
	    <div class="box box3">13</div>
	    <div class="box box3">14</div>
	    <div class="box box3">15</div>
	    <div class="box box3">16</div>
	    <div class="box box3">17</div>
	    <div class="box box3">18</div>
	</div>

Please help me thanks in advance!!

Answer 1

I think you have to let your animation to be played, see my below example, with another easy animation.

First you call the animation, then must wait for finishing animation and after all place your element at the end.

First solution :

    var initialData = [
			"box1",
			"box1",
			"box1",
			"box1",
			"box1",
			"box1",
			"box2",
			"box2",
			"box2",
			"box2",
			"box2",
			"box2",
			"box3",
			"box3",
			"box3",
			"box3",
			"box3",
			"box3"
		];

		jQuery(function(){
			var wrapper = jQuery("#wrapper");
			var tableCellTemplate = jQuery("#templates #table-cell").html();
			var movableTemplate = jQuery("#templates #movable").html();
			var bodyEl = jQuery('body');

			var dataCount = initialData.length;
			var maxIndex = dataCount-1;

			jQuery.fn.updateIndex = function(_index){
				if(this.hasClass('movable')){
					var destinationCellEl = jQuery(".box[data-index='"+_index+"']");
					var destinationMovable = jQuery(".movable[data-index='"+_index+"']");

					this.attr('data-index', _index);

					if(destinationMovable !== 0){
						destinationMovable.updateIndex(_index -1);
					}

					if(destinationCellEl.length !== 0){
						this.css({
							top: destinationCellEl.offset().top,
							left: destinationCellEl.offset().left,
							width: destinationCellEl.outerWidth(),
							height: destinationCellEl.outerHeight()
						});
					}
				}
				return false;
			};

			initialData.forEach(function(_item, _index){
				var newCell = jQuery(tableCellTemplate);
				newCell.attr('data-index', (_index));
				wrapper.append(newCell);

				var newMovable = jQuery(movableTemplate);
				newMovable.addClass(_item);
				newMovable.text(_index+1);
				bodyEl.append(newMovable);
				newMovable.updateIndex(_index);
			});

			jQuery('.movable').on('click',function(){
				var movableEl = jQuery(this);
				movableEl.updateIndex(maxIndex);
			});
		});

	div.box{
		height: 100px;
		width: 200px;
		float: left;
		display: inline-block;
		position: relative;
	}

	span.movable  {
		position: absolute;
		top: 0
		left: 0;
		z-index: 99;

		background:red;
		text-align:center;
		color:#fff;
		font-size:26px;
		margin: 0px;
		transition: all 500ms;
	}

	span.movable.box2{
		background:green;
	}
	span.movable.box3{
		background:orange;
	}

	.hidden {
		display: none;
	}

	<div id="wrapper">
	</div>

	<div class="hidden" id="templates">
		<div id="table-cell">
			<div class="box"></div>
		</div>
		<div id="movable">
			<span class="movable" data-index=""></span>
		</div>

	</div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Second solution

	$(function(){
		$('.box:not(.ready-for-move)').on('click',function(){
			var thisEl = jQuery(this);
			var topPos = thisEl.offset().top, leftPos = thisEl.offset().left;
			thisEl.addClass("ready-for-move");
			thisEl.css({
				top: topPos,
				left: leftPos
			});

			var latestItem = jQuery('.box:last-child');
			
			setTimeout(function(){
				thisEl.css({
					top: latestItem.offset().top,
					left: latestItem.offset().left + latestItem.outerWidth()
				});
			}, 50);

			setTimeout(function(){
				$('#wrapper').append(thisEl);
				thisEl.removeClass('ready-for-move');
				thisEl.css({
					top: "auto",
					left: "auto"
				});
			}, 500);

		});
	});

div.box{
	height: 100px;
	width: 200px;
	background:red;
	display: inline-block;
	text-align:center;
	color:#fff;
	font-size:26px;
	margin: 0px;
	float: left;

	transition: all 500ms;
}
div.box:active{
	background:yellow;
}
div.box2{
	background:green;
}
div.box3{
	background:orange;
}

.elementToAnimate{
	animation: yourAnimation 3s forwards 0s linear;
}

.ready-for-move {
	position : absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
	    <div class="box">1</div>
	    <div class="box">2</div>
	    <div class="box">3</div>
	    <div class="box">4</div>
	    <div class="box">5</div>
	    <div class="box">6</div>
	    <!-- for box 2 -->
	    <div class="box box2">7</div>
	    <div class="box box2">8</div>
	    <div class="box box2">9</div>
	    <div class="box box2">10</div>
	    <div class="box box2">11</div>
	    <div class="box box2">12</div>
	    <!-- for box 3-->
	    <div class="box box3">13</div>
	    <div class="box box3">14</div>
	    <div class="box box3">15</div>
	    <div class="box box3">16</div>
	    <div class="box box3">17</div>
	    <div class="box box3">18</div>
	</div>