Page transitions with FlowRouter, React, and React Motion

I’m currently looking for a solution for page transitions for React and FlowRouter, but I’m unable to find any good ones. React Motion is the clear leader… has anyone done anything in this area?

It appears I can switch to React Router and get React Motion integration for page transitions almost out of the box, however there are certain reasons I’d still like to use FlowRouter (reactivity being one of them). Any help would be appreciated!

FlowRouter should render one main App.jsx.

In App.jsx wrap your {this.props.main} within a parent Motion component. Or something like: https://facebook.github.io/react/docs/animation.html#high-level-api-reactcsstransitiongroup

Thank you. How can I trigger the animation though?

Let’s say I have a MainLayout component, that is wrapped with the App component. In Meteor when I go to a new page, I want the current page to slide left, and the new page to slide in from the left. I kinda have the animation working now with react-motion-ui-pack, however if the route changes, the MainLayout component is not unmounted… which means the animation is not re-run/triggered.

Any progress on this, Mark?

Sorry didn’t see this message. No progress on this.

Looking for a similar solution. Did you find one in the meantime?