Integration with Iron-Router

[AdamBrodzinski]

Very cool package!

I've been struggling to get animations in general to work with Iron Router. Is there an easy way to use this with IronRouter so that you can fade one page into the next (instead of instantly rendering) or slide iOS style?

Thanks! Adam

[gwendall]

Would be cool indeed, I'll think about how to best implement it. PR are welcome if you want to have a shot at it btw. :)

[gwendall]

The best way would be to:

1. wrap your {{> yield}} within an element (say a div with a class .container)
2. wrap each of your page templates within an element of the same class (say divs with a .page class)
3. set them all to position: fixed so that they can overlap on animations / transitions.

Then do something like that (assuming your {{> yield}} is included in a layout template):

Template.layout.animations({
  ".page": {
    container: ".container",
    in: "fadeIn",
    out: "fadeOut"
  }
});

Easy for fadeIn or any transition that does not imply directions. Slide iOS style is a bit more tricky since you have to be able to define in which direction the transition should happen (left->right or right->left).

[AdamBrodzinski]

Cool i'll check this out! I have a site that uses fading so that should be easy. For iOS perhaps a variable for the direction tied along with a helper like Router.goBack and Router.goForward or something. I'll try it out and let you know how it works :beers:

[lerayj]

Yep, I dunno if you are still working on the project, but it's seems that changing route from iron router break the effect.