Animated page transitions between Iron Router routes with Meteor

Question

Currently, the only solutions I have found for animating between routes is just fade out the current page onBeforeAction and fade in the new page onAfterAction. But this is just lame.

I want to try to execute some really sleek transitions like these.

I believe this requires having multiple pages rendered on the page at the same time, but that seems very resources intensive and doesn't even seem to use iron router at all.

Any ideas how I can implement this?

Answer 1

I use a solution like this http://meteorpad.com/pad/5kii9SRbbnjiTHeQe

The MeteorPad doesn't allow to use IronRouter, so my example doesn't use it. In IronRouter you can use action() method to set "currentPage" session variable and always render "transitioner" template. Something like this:

Router.map(function() {
  this.route('home', {
    path: '/',
    action: function() {
      Session.set('currentPage', 'home');
      this.render('transitioner');
    }
  });

  this.route('about', {
    action: function() {
      Session.set('currentPage', 'about');
      this.render('transitioner');
    }
  });
});

I use a wrapper for this. It also helps me to define transition styles and directions.

And be careful with subscriptions/unsubscriptions, becouse previous page will react to subscriptions changes before the transition is compelete!

Answer 2

This question seems to get asked a fair amount and there is no definitive solution, and a lot of answers out there are getting stale, or at least not applicable to the latest iron-router and Meteor 1.0.

I just did a bunch of searching around for the best answer and at least today it seems the packages for this are:

https://github.com/percolatestudio/momentum-iron-router/ and https://github.com/ccorcos/meteor-transitioner/

The former hasn't been updated in a little while but has lots of commits. The latter has few commits but may be being actively worked on.

I'm in progress on trying them out so if I remember I'll check back in.