<p><button class="move-button">Move items</button></p>

<div class="grid grid-a">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

<div class="grid"></div>
button { font-size: 20px; }

.grid {
  width: 125px;
  background: #DDD;
  height: 125px;
  float: left;
  margin-right: 20px;
}

.grid-item {
  width: 20px;
  height: 20px;
  margin: 0 5px 5px 0;
  background: #09F;
  float: left;
  transition: transform 0.4s;
}

.grid-item.is-moved {
  transform: translateX(145px);
}
var moveButton = document.querySelector('.move-button');
var items = document.querySelectorAll('.grid-a .grid-item');

var isToggled = false;
var isMoving = false;
var toggleDirection = 1;
var lastMove =  new Date();
var moveIndex = items.length;

moveButton.onclick = function() {
  isToggled = !isToggled;
  toggleDirection *= -1;
  moveIndex -= isMoving ? toggleDirection : 0;
  isMoving = true;
};

function animate() {
  moveItems();
  requestAnimationFrame( animate );
}

animate();

// time in ms between staggered transition
var delay = 50;

function moveItems() {
  if ( !isMoving ) {
    return;
  }
  var now = new Date();
  if ( now - lastMove < delay ) {
    return
  }
  lastMove = now;
  moveIndex += toggleDirection;
  var item = items[ moveIndex ];
  if ( item ) {
    item.classList.toggle('is-moved');
  } else {
    isMoving = false;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.