A Pen by Chris Roberts.

A-Pen-by-Chris-Roberts.markdown

A Pen by Chris Roberts

A Pen by Chris Roberts on CodePen.

Animated isotope like boxes using floats and css3 transition.

License.

index.html

<button>Narrow down</button>
<div class="container">
<div class="box box-1">1</div>
<div class="box box-2">2</div>
<div class="box box-3">3</div>
<div class="box box-4">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
</div>

script.js

$('button').on('click', function () {

  // how many are getting removed ?
  // calculate width
  
  var box1 = $('.box:nth-child(1)');
  var box2 = $('.box:nth-child(2)');

  box2.addClass('prep-animate'); 
  box2.addClass('animate');

  box1.fadeOut(function() {
    box2.removeClass('prep-animate');
    box2.removeClass('animate');
    $(this).remove(); 
  });

});

style.css

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

button {
  margin: 0 0 10px;
}

.container {
  overflow: hidden;
  width: 630px;
}

.box {
  display: flex; 
  float: left;
  width: 200px; 
  height: 200px;
  margin: 0 10px 10px 0;
  background: #444;  
  justify-content: center; 
  align-items: center;
  color: #fff;
  font-size: 40px;
  font-family: sans-serif;
}

.clone {
  background: none;
}

.prep-animate {
  transition: all 0.4s ease-out;
}

.animate {
  margin-left: -210px; 
}