Using Isotope and there's a weird wiggle on the sortable items?

I am using Isotope for a personal project and it works fine, but when I use any of the filters or sort options, the items it filters / sorts does this... subtle wiggling motion for a second? I am nowhere near good enough at Javascript / jQuery to begin diagnosing what's making it do that. Does anyone know?

The full CSS, in case it was something in here that's making the wiggle happen:

@font-face {
  font-family: Raleway;
  src: url('/_fonts/Raleway.ttf');
}

@font-face {
  font-family: Nunito;
  src: url('/_fonts/Nunito.ttf');
}

body{
  font-family:'Nunito';
  color:white;
  background-color:#260651;
  background-image:none;
}

h1 {
  font-family:'Raleway';
  font-weight:400;
}

#topbar{
  width:100%;
  top:0;
  right:0;
  position:absolute;
  height:75px;
  background:#190336;
  padding:7.5px;
  box-sizing:border-box;
}

.container{
  margin:75px 0 0 0;
  min-width:100%;
  height:100%;
  display:inline-block;
}

#sidebar {
  position:fixed;
  height:100%;
  width:300px;
  text-align:center;
  padding:10px;
  box-sizing:border-box;
  display:inline-block;
}

#filterbox {
  margin-bottom:100px;
  height:calc(100% - 150px);
  position:sticky;
  top:0;
  overflow-y:scroll;
  }
  

#filterbox h1{
  text-align:center;
  font-size:125%;
}
  

#filterbox button {
    outline: none;
    background: transparent;
    padding:4px;
    margin:2px;
    border:transparent;
    color: #FECF99;
    letter-spacing: .5px;
    font-size:85%;
    font-family: 'Nunito';
    border-radius:3px;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
}

#filterbox button:hover{
    color:#190336;
    background:#BD64A8;
}

#filterbox button:active,#filterbox .button.is-checked {
    color: #BD64A8;
    text-decoration:underline;
    background: #190336;
    
}

.button-group {
    margin: 10px;
}

#masterlist {
  width:calc(100% - 300px);
  height:100vh;
  margin-left:300px;
  display:inline-block;
}

.item {
  width:250px;
  min-height:300px;
  margin:20px;
  padding:15px;
  background:rgba(0,0,0,.25);
  border-radius:5px;
  box-sizing:border-box;
  transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  -o-transition:.5s;
}

.item img {
    display: block;
    margin:5px auto;
    width: 175px;
    height: 175px;
    border-radius: 50%;
    border: 3px solid transparent;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
    -webkit-filter: grayscale(25%);
}

.item img:hover {
    cursor:crosshair;
    -webkit-filter: grayscale(0%);
}

.item h1{
  font-size:150%;
  text-align:center;
  color:white;
  margin-bottom:5px;
}

.info {
    position: relative;
    font-size:90%;
    color:white;
    margin-top: 5px;
    letter-spacing:.25px;
    text-align:center;
}

.info p{
  margin: 7px 0;
  text-indent:0px;
}

.info i, .info em {
  color:white;
}

.info b, .info strong {
  color:white;
}

.info a{
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
}

.info a:hover {
    color:white;
}


/*----- COLORS -----*/

/*--- RED ---*/
.red img:hover {border: 3px solid firebrick;}
.red {box-shadow:7px 7px 0 firebrick; border:2px solid firebrick;}
.red b,strong {color:firebrick;}
.red a {color:firebrick;}

/*--- YELLOW ---*/
.yellow img:hover {border: 3px solid #E6C300;}
.yellow {box-shadow:7px 7px 0 #E6C300; border:2px solid #E6C300;}
.yellow b,strong {color:#E6C300;}
.yellow a {color:#E6C300;}
    
/*--- GREEN ---*/
.green img:hover {border: 3px solid forestgreen;}
.green {box-shadow:7px 7px 0 forestgreen; border:2px solid forestgreen;}
.green b,strong {color:forestgreen;}
.green a {color:forestgreen;}

/*----- END COLORS -----*/

The HTML, with Isotope script:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Masterlist</title>
    
    <!-- link to the css above went here -->
    
<script src="/_assets/jquery.min.js"></script> <!--lastest version of jQuery -->
<script src="/_assets/isotope.pkgd.min.js"></script>
  </head>
  <body>
  
<div id="topbar">

</div>
  
<div class="container">
    
<div id="sidebar">

<div id="filterbox">

    <div class="button-group" data-filter-group="color">
        <h1>Color</h1>
        <button class="button is-checked" data-filter="">any</button>
        <button class="button" data-filter=".red">red</button>
        <button class="button" data-filter=".yellow">yellow</button>
        <button class="button" data-filter=".green">green</button>
    </div>
    
  <div class="button-group sort-by-button-group">
  <h1>Sort by...</h1>
        <button class="is-checked" data-sort-by="original-order">original order</button>
        <button data-sort-by="name">surname</button>
        <button data-sort-by="age">age</button>
</div>

    
</div>
</div>



<div id="masterlist">



<div class="item green">
<h1>Firstname <span class="name">Surname</span></h1>
<img src="https://placehold.it/175x175">
<div class="info">  
    <p>Age <span class="age">24</span>
</div>
</div>



<div class="item red">
<h1>Firstname <span class="name">Lastname</span></h1>
<img src="https://placehold.it/175x175">
<div class="info">  
    <p>Age <span class="age">53</span>
</div>
</div>



<div class="item yellow">
<h1>Firstname <span class="name">Familyname</span></h1>
<img src="https://placehold.it/175x175">
<div class="info">  
    <p>Age <span class="age">16</span>
</div>
</div>




</div>
</div>



<script type="text/javascript">
$(document).ready( function() {
 // init Isotope
 var $grid = $('#masterlist').isotope({
   itemSelector: '.item',
   layoutMode: 'fitRows',
   getSortData: {
    name: '.name',
    age: '.age parseInt',
    }
 });

 // store filter for each group
 var filters = {};

$grid.isotope({ sortBy : 'name' });
// original order of the item elements

$grid.isotope({ sortBy : 'age' });
// random order
$grid.isotope({ sortBy : 'original-order' });



// sort items on button click
$('.sort-by-button-group').on( 'click', 'button', function() {
  var sortByValue = $(this).attr('data-sort-by');
  $grid.isotope({ sortBy: sortByValue });
});

$grid.isotope({
  sortAscending: {
    name: true,
    age: true
  }
});

 $('#filterbox').on( 'click', '.button', function() {
   var $this = $(this);
   // get group key
   var $buttonGroup = $this.parents('.button-group');
   var filterGroup = $buttonGroup.attr('data-filter-group');
   // set filter for group
   filters[ filterGroup ] = $this.attr('data-filter');
   // combine filters
   var filterValue = concatValues( filters );
   // set filter for Isotope
   $grid.isotope({ filter: filterValue });
 });

 // change is-checked class on buttons
 $('.button-group').each( function( i, buttonGroup ) {
   var $buttonGroup = $( buttonGroup );
   $buttonGroup.on( 'click', 'button', function() {
     $buttonGroup.find('.is-checked').removeClass('is-checked');
     $( this ).addClass('is-checked');
   });
 });

});

// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
  $grid.isotope('layout');
});

// flatten object by concatting values
function concatValues( obj ) {
 var value = '';
 for ( var prop in obj ) {
   value += obj[ prop ];
 }
 return value;
}

</script>

  </body>
</html>

Answering my own question. Apparently there's a known bug that makes the class you're sorting (in my case, .item) freak out if you have the CSS transition property on them. So all I did was take transition off the class itself and kept it on the specific things in the class I want it on (changing the color of links and adding a border on images when hovering).

.item {
  width:250px;
  min-height:300px;
  margin:20px;
  padding:15px;
  background:rgba(0,0,0,.25);
  border-radius:5px;
  box-sizing:border-box;
}

.item img {
    display: block;
    margin:5px auto;
    width: 175px;
    height: 175px;
    border-radius: 50%;
    border: 3px solid transparent;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
    -webkit-filter: grayscale(25%);
}

.item img:hover {
    cursor:crosshair;
    -webkit-filter: grayscale(0%);
}

Testing it on my actual site makes the .item divs move smoothly now!