Filter content with smooth sliding animation

I am building a filter that is similar to isotope. The problem I am having is the smoothness when removing items. I translate the items (0,0) to get the effect of scaling out, while also removing their width (width: 0px) causing the items to shift over. I was wondering what I could do to make it not feel so rough?

I have tried using a .each() with a delay to ease the transition of all the items at the same time, but it gives it a very linear feel. I have also removed the items completely in a timeout that waits for the animation to complete.

Here is a working JSFiddle.

JS/JQuery

$(document).ready(function() {
    var navItem = $("nav ul li"),
        clear = $("nav li.clear"),
        first = $("nav li.first"),
        second = $("nav li.second"),
        third = $("nav li.third"),
        items = $(".items li"),
        notItem1 = $(".items li:not([data-exhibit='first'])"),
        notItem2 = $(".items li:not([data-exhibit='second'])"),
        notItem3 = $(".items li:not([data-exhibit='third'])");

    var active = "is-active",
        hidden = "is-hidden";

    navItem.on("click", function() {
        navItem.removeClass(active);
        $(this).addClass(active); 
    });

    clear.on("click", function() {
        items.removeClass(hidden);
    });

    first.on("click", function() {
        items.removeClass(hidden);
        notItem1.addClass(hidden);
    });

    second.on("click", function() {
        items.removeClass(hidden);
        notItem2.addClass(hidden);
    });

    third.on("click", function() {
        items.removeClass(hidden);
        notItem3.addClass(hidden);
    });

});

HTML

<nav>
    <ul>
        <li class="clear">view all</li>
        <li class="first">First</li>
        <li class="second">Second</li>
        <li class="third">Third</li>
    </ul>
</nav>

<ul class="items">
    <li class="third" data-exhibit="third"><img src="http://ift.tt/1Lyw7PG" alt=""></li>
    <li class="first" data-exhibit="first"><img src="http://ift.tt/1Lyw7PI" alt=""></li>
    <li class="second" data-exhibit="second"><img src="http://ift.tt/1kh2Ad7" alt=""></li>
    <li class="third" data-exhibit="third"><img src="http://ift.tt/1Lyw7PG" alt=""></li>
    <li class="first" data-exhibit="first"><img src="http://ift.tt/1Lyw7PI" alt=""></li>
    <li class="third" data-exhibit="third"><img src="http://ift.tt/1Lyw7PG" alt=""></li>
    <li class="first" data-exhibit="first"><img src="http://ift.tt/1Lyw7PI" alt=""></li>
    <li class="third" data-exhibit="third"><img src="http://ift.tt/1Lyw7PG" alt=""></li>
    <li class="second" data-exhibit="second"><img src="http://ift.tt/1kh2Ad7" alt=""></li>
    <li class="first" data-exhibit="first"><img src="http://ift.tt/1Lyw7PI" alt=""></li>
    <li class="second" data-exhibit="second"><img src="http://ift.tt/1kh2Ad7" alt=""></li>
    <li class="second" data-exhibit="second"><img src="http://ift.tt/1kh2Ad7" alt=""></li>
</ul>

SCSS

nav {
   width: 80%;
    margin: 25px auto;
    text-align: center;
    li {
        display: inline-block;
        padding: 5px 15px;
        background: #1abc9c;
        color: white;
        text-transform: uppercase;
        cursor: pointer;

        transition-property: background;
        transition-duration: .3s;
        &.clear { background: #7f8c8d; }
        &.first { background: #1abc9c; }
        &.second { background: #2ecc71; }
        &.third { background: #3498db; }
        &:hover, &.is-active { background: #333; }
    }
}

.items {
    width: 80%;
    margin: 0 auto;
    li {
        display: block;
        width: 25%;
        height: 150px;
        float: left;
        overflow: hidden;
        transition-property: transform, width;
        transition-duration: .5s;
        &.is-hidden {
            transform: scale(0,0);
            width: 0px;
            margin: -2px;
        }
        img { width: 100%; }
    }
}