Commit 14-1: Added post reordering animation.

client/templates/posts/posts_list.html

@@ -1,8 +1,10 @@
 <template name="postsList">
   <div class="posts page">
-    {{#each posts}}
-      {{> postItem}}
-    {{/each}}
+    <div class="wrapper">
+      {{#each posts}}
+        {{> postItem}}
+      {{/each}}
+    </div>
     {{#if nextPath}}
       <a class="load-more" href="{{nextPath}}">Load more</a>
     {{else}}

client/templates/posts/posts_list.js

@@ -0,0 +1,40 @@
+Template.postsList.onRendered(function () {
+  this.find('.wrapper')._uihooks = {
+    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);
+
+    }
+  };
+});