Mixitup

Bonsoir a tous,

Pour ma formation, je dois reproduire la page de mixitup (https://www.kunkalabs.com/mixitup/ mais sans le plugin, uniquement du code jquery

pour l'ordre croissant , j'ais ceci :

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

Je suis content sa fonctionne ;-)

l'HTML des rectangles:

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

ma question est comment faire pour obtenir la meme animation des rectangles SANS le plugin


merci à vous