Filtering with jQuery Isotope leads to jerky animation

I'm using Isotope on a project, but have run into an issue when using the filter method.

Filtering the list hides the undesired elements fine, but the transitioning animations aren't as smooth as the demos have me believe they should be.

The following code should illustrate my point; the filters apply and the elements do animate, but there are noticeable, visual jumps:

var config = {
    itemSelector: '.grid_item',
    percentPosition: true,
    layoutMode: 'fitRows',
    fitRows: {
        gutter: '.grid_gutter'
    }
}

$('.grid').isotope(config);

$('.filter').on('click', function(){
    var type = $(this).attr('id');
    $('.grid').isotope({
        filter : '.' + type
    });
});

$('#clear').on('click', function(){
    $('.grid').isotope({
        filter : '*'
    });
});

html, body {
    margin: 0;
    padding: 0;
}

.grid {
    list-style: none;
    margin: 1em;
    padding: 0;
    text-indent: 0;
}

.grid_item {
    background: gray;
    margin: 0 0 1%;
    padding-top: 40%;
    position: relative;
    width: 49.5%;
}

.grid_text {
    color: #fff;
    position: absolute;
    top: 50%; left: 0; right: 0; bottom: 0;
    text-align: center;
}

.grid_gutter {
    width: 1%;
}

<script src="http://ift.tt/1oMJErh"></script>
<script src="http://ift.tt/1MzjzYT"></script>

<button class="filter" id="exit">Exit</button>
<button class="filter" id="creation">Creation</button>
<button id="clear">Clear</button>

<ul class="grid">
    <div class="grid_gutter"></div>
    <li class="grid_item exit">
        <span class="grid_text">Exit</span>
    </li>
    <li class="grid_item creation">
        <span class="grid_text">Creation</span>
    </li>
    <li class="grid_item creation">
        <span class="grid_text">Creation</span>
    </li>
</ul>

I assume that it's something in my CSS that's causing the issue, but I can't weed it out.

Also, see this fiddle.