meteor__microscope/client/templates/posts/posts_list.js

Template.postsList.onRendered(function () {
  this.find('.wrapper')._uihooks = {
    insertElement: function (node, next) {
      $(node).hide().insertBefore(next).fadeIn();
    },

    moveElement: function (node, next) {
      var $node = $(node);
      var $next = $(next);
      var oldTop = $node.offset().top;
      var height = $node.outerHeight(true);

      var $inBetween = $next.nextUntil(node);
      // This was in the wrong direction, try the other way..
      if ($inBetween.length === 0) {
        $inBetween = $node.nextUntil(next);
      }

      // Now put node into place
      $node.insertBefore(next);

      // Measure new top.
      var newTop = $node.offset().top;

      // Move node "back" to where it was before.
      $node
        .removeClass('animate')
        .css('top', oldTop - newTop);

      // Push every other element down (or up) to put them back.
      $inBetween
        .removeClass('animate')
        .css('top', oldTop < newTop ? height : -1 * height);

      // Force a redraw.
      $node.offset();

      // Reset everything to 0, animated.
      $node.addClass('animate').css('top', 0);
      $inBetween.addClass('animate').css('top', 0);
    },

    removeElement: function (node) {
      $(node).fadeOut(function () {
        this.remove();
      });
    }
  };
});