The elements now animate:
I came up with this code.
//-- ANIMATION
var columnCount = 6
var leftRange = 45;
var topRange = 162;
var counter = 0;
var changed = false;
$.each(animateArray, function( index, thisItem ) {
if (counter >= columnCount) {
topRange = 453;
}
if ( counter >= columnCount) {
if (! changed) {
leftRange = 45;
changed = true;
}
}
console.log(counter);
console.log(leftRange);
$(thisItem).parent("div.rect").animate({ "left": leftRange, "top": topRange }, "slow" );
leftRange = leftRange + 121;
counter++;
});
Which is added on to the end of the filter()
Again for your own elements you would need to adjust.
But this will give you some idea of a way to possibly animate the filtered elements.
Also doing it this way does change the overall order of the elements. ( I think I can fix that by giving each element a number and animate in higher number animates last… which thinking about is is why the original TagSort has numbers for each element. I wondered what they where for.
Update:
I fixed the problem of order of the elements when all displayed changing from the original order by using the number I mention above and .Sort() .
It was more simple than I thought it would be 
animateArray.sort(function(obj1, obj2) {
return $(obj1[0]).attr("data-item-id") - $(obj2[0]).attr("data-item-id")
});
Updated from v2 to v3
TagFilter_v3.hypetemplate.zip (184.9 KB)