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?

Frady

Answer 1

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.

Deherrera

hey there, I actually just made the latter. haha. I forgot about this question – Frady

FYI - I just tried both of these on Meteor 1.1.0.3. I got errors with momentum-iron-router (along with a few other people all having the same issue on the Issues page. ccorcos:meteor-transitioner is working awesome. Easy to get going. – Ways

Answer 2

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!

Semivitreous

meteorpad isn't working for me right now, but i see what you're doing here. Seems like a pain though. But then again, I don't see any other way of doing it... :/ – Frady

Yes, I think you can organize all this in more useful way, but the principle will remain the same. Or you can wait for an update of Iron-Transitioner, but it uses the same principle too and has not been updated for a long time. – Semivitreous

hmmm. thanks for the help. Let me see what I can come up with – Frady

Your solution seems to be awesome! I'm on the trail and it's working pretty well. I use Template.dynamic though. – Betray