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

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

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. — Keno, Aug 14 '18 at 16:37
@keno Clayton, it should suppose to work like `@Arash Khajelou` below answer but without `setTimeout`. With some improvement in `animation` — , Aug 15 '18 at 00:46

score 4 · Accepted Answer · edited Aug 20 '18 at 21:09

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>

but this very `error prone` and not `scalable solution` can you try other without `setTimeout` — EaBengaluru, Aug 14 '18 at 16:14
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. — Arash Khajelou, Aug 14 '18 at 16:54
still there is no solution, what you said above can you help me with that? please — EaBengaluru, Aug 15 '18 at 12:50
can you please share your code with me in codepen or some where else. so I can help you. — Arash Khajelou, Aug 25 '18 at 06:59

score 0 · Answer 2 · answered Aug 11 '18 at 15:12

0

remove this line from your handler

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

answered Aug 11 '18 at 15:12

ashish singh

6,526
2
15
35

This line I wanted to shift the clicked box to bottom as per requirement – EaBengaluru Aug 11 '18 at 15:30
move it below the line where you add the class – ashish singh Aug 11 '18 at 15:33
i have tried that even though it is not working , please help me – EaBengaluru Aug 12 '18 at 04:41

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

2 Answers2

First solution :

Second solution