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!!

Kirst

OP I'm not fully understanding the question. Do you want the elements to shift to the right in that grid when clicked? Do you want them to shift down instead if they're in the last row? Please clarify your goal so we can better understand what you need to accomplish. – Sextain

@keno Clayton, it should suppose to work like @Arash Khajelou below answer but without setTimeout. With some improvement in animation – Rowenarowland

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>

Cannice

but this very error prone and not scalable solution can you try other without setTimeout – Kirst

in order to prevent using these timeout functions, you have to change your positioning system, if you prevent using $.fn.append() function, so there is no need to these timeouts, i mean something like absolute positioning systems. – Cannice

still there is no solution, what you said above can you help me with that? please – Kirst

I have another solution for you, check it and feed me back. – Cannice

are you there one help – Kirst

for first solution array based solution – Kirst

can you please share your code with me in codepen or some where else. so I can help you. – Cannice

Answer 2

remove this line from your handler

   $('#wrapper').append(this);

Rattrap

This line I wanted to shift the clicked box to bottom as per requirement – Kirst

move it below the line where you add the class – Rattrap

i have tried that even though it is not working , please help me – Kirst