14-animations.md.erb

---
title: Animations
slug: animations
date: 0014/01/01
number: 14
contents: See what happens behind the scenes when Meteor swaps two DOM elements.|Learn how to animate the reordering of posts.|Learn how to animate the insertion of new posts.
paragraphs: 85
---

<% note do %>

### Out of Date?

////

////

<% end %>

////

### Meteor & the DOM

////

////

////

### The Soviet Runner

////

////

////

### Breaking It Down

////

////

////
////
////
////
////
////

////

<%= diagram "animation_diagram", "Switching two posts", "pull-center" %>

////

////

////

### Proper Timing

////

////

////

////

////

////

### CSS Positioning

////

////

////

////

////

~~~css
.post{
  position:relative;
  transition:all 300ms 0ms ease-in;
}
~~~
<%= caption "client/stylesheets/style.css" %>

////

////

<% note do %>

### Position:absolute

////

////

<% end %>

### Total Recall

////

////

### Ranking Posts

////

////

////

////

~~~js
Template.postsList.helpers({
  postsWithRank: function() {
    return this.posts.map(function(post, index, cursor) {
      post._rank = index;
      return post;
    });
  }
});
~~~
<%= caption "/client/templates/posts/posts_list.js" %>
<%= highlight "2~8" %>

////

////

~~~html
<template name="postsList">
  <div class="posts">
    {{#each postsWithRank}}
      {{> postItem}}
    {{/each}}
    
    {{#if nextPath}}
      <a class="load-more" href="{{nextPath}}">Load more</a>
    {{/if}}
  </div>
</template>
~~~
<%= caption "/client/templates/posts/posts_list.html" %>

<%= highlight "3" %>

### Putting It Together

////

////
////
////

////

////
////
<%= caption "/client/templates/posts/post_item.html" %>
<%= highlight "2" %>

////

////

~~~js
var POST_HEIGHT = 80;
var Positions = new Mongo.Collection(null);

Template.postItem.helpers({

  //..
  
  },
  attributes: function() {
    var post = _.extend({}, Positions.findOne({postId: this._id}), this);
    var newPosition = post._rank * POST_HEIGHT;
    var attributes = {};
    
    if (! _.isUndefined(post.position)) {
      var offset = post.position - newPosition;      
      attributes.style = "top: " + offset + "px";
      if (offset === 0)
        attributes.class = "post animate"
    }
    
    Meteor.setTimeout(function() {
      Positions.upsert({postId: post._id}, {$set: {position: newPosition}})
    });
    
    return attributes;
  }
});

//..
~~~
<%= caption "/client/templates/posts/post_item.js" %>
<%= highlight "1~2, 8~26" %>

////

////

////

<% note do %>

### Running Schedule

////

////

////

<% end %>

### The Attributes Helper

////

////

////

////

////

////

### Timing Out

////

////

- ////
- ////
- ////
- ////
- ////

////

- ////
- ////
- ////
- ////
- ////
- ////

////

<%= commit "14-1", "Added post reordering animation." %>

### Animating New Posts

////

~~~js
//..

attributes: function() {
  var post = _.extend({}, Positions.findOne({postId: this._id}), this);
  var newPosition = post._rank * POST_HEIGHT;
  var attributes = {};
  
  if (_.isUndefined(post.position)) {
    attributes.class = 'post invisible';
  } else {
    var delta = post.position - newPosition;      
    attributes.style = "top: " + delta + "px";
    if (delta === 0)
      attributes.class = "post animate"
  }
  
  Meteor.setTimeout(function() {
    Positions.upsert({postId: post._id}, {$set: {position: newPosition}})
  });
  
  return attributes;
}

//..
~~~
<%= caption "/client/templates/posts/post_item.js" %>
<%= highlight "8~10" %>

////

<%= commit "14-2", "Fade items in when they are drawn." %>

<% note do %>

### CSS & JavaScript

////

////

<% end %>

////