Animation d'un tri

Bonjour,
Dans le cadre de mes études je dois réaliser la même animation que dans le plugin MixItUp https://www.kunkalabs.com/mixitup/

J'ai fait tous les tris et filtres nécessaire seulement ça se passe trop vite et il faudrait que les blocs se déplacent comme dans le plugin.

J'ai vu qu'ils utilisaient un transform: translate pour obtenir cet effet. Le problème c'est que je ne parviens pas à l'intégrer dans mes fonctions de tri.

Voici le code html :

<div id="SandBox" class="sandbox">
<div class="mix category-1" data-value="7">7</div>
<div class="mix category-2" data-value="9">9</div>
<div class="mix category-1" data-value="4" >4</div>
<div class="mix category-2" data-value="6">6</div>
<div class="mix category-1" data-value="10">10</div>
<div class="mix category-1" data-value="2">2</div>
<div class="mix category-2" data-value="8">8</div>
<div class="mix category-2" data-value="3">3</div>
<div class="mix category-1" data-value="1">1</div>
<div class="mix category-2" data-value="11">11</div>
<div class="mix category-2" data-value="5">5</div>
<div class="mix category-2" data-value="12">12</div>
</div>

Et voici ma fonction pour effectuer un tri croissant :

$("#croissant").click(function(){
$('#SandBox').children().sort(function(a, b) {
var tri = +a.getAttribute('data-value') - +b.getAttribute('data-value');
return tri;
}).css("marginLeft","1.5%").appendTo($('#SandBox'));
});

Pourriez-vous m'aider svp. Vous êtes mon dernier espoir.
Merci d'avance.

EDIT: Ajout de la coloration syntaxique.