Animated page transitions between Iron Route routes with Meteor

Question

Currently, the only solutions I have found for animating between routes simply disappear the current onBeforeAction page and disappear on the new onAfterAction page. But it is just lame.

I want to try some really smooth transitions like these .

I believe that this requires the simultaneous display of several pages on a page, but it seems very resource-intensive and does not even look like using an iron router at all.

Any ideas how I can implement this?

Answer 1

This question seems to be getting a fair amount, and there is no final solution, and many of the answers there become obsolete or, at least, not applicable to the latest iron routers and Meteor 1.0.

I just bought a search for the best answer, and at least today it seems that the packages for this:

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

The first has not been updated after a while, but has many commits. The latter has several commits, but can work actively.

I try to check them, so if I remember that I will return.

Answer 2

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

MeteorPad does not allow the use of IronRouter, so my example does not use it. In IronRouter, you can use the action () method to set the sessionPage variable and always display the adapter pattern. Something like that:

 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 shell for this. It also helps me identify transition styles and directions.

And be careful with subscribing / unsubscribing, because the previous page will respond to subscription changes before the transition is complelete!