[Ivan Diaz] - Add animations

src/app/main/main-home/main-home-page.scss

@@ -1,6 +1,4 @@
 .main-home-page {
-  text-align: center;
-  min-height: 400px;
 
   &--widget {
     display: inline-block;

src/app/main/main-layout.js

@@ -3,6 +3,8 @@ import {RouteHandler}     from 'react-router';
 
 import MainHeader         from 'app/main/main-layout-header';
 import MainFooter         from 'app/main/main-layout-footer';
+import {TransitionMotion, spring} from 'react-motion';
+import RouteTransition from 'utils/route-transition';
 
 var MainLayout = React.createClass({
 
@@ -12,7 +14,9 @@ var MainLayout = React.createClass({
 
                 <MainHeader />
 
+                <div className="main-layout--content">
                     {this.props.children}
+                </div>
 
                 <MainFooter />
 

src/app/main/main-layout.scss

@@ -6,4 +6,10 @@
   background-color: $grey;
   max-width: 1100px;
   border-radius: 4px;
+
+  &--content {
+    text-align: center;
+    min-height: 400px;
+    width: 1100px;
+  }
 }

src/app/main/main-signup/main-signup-page.js

@@ -1,12 +1,14 @@
 import React              from 'react/addons';
 import {RouteHandler}     from 'react-router';
+import MainHomePageLoginWidget  from 'app/main/main-home/main-home-page-login-widget';
 
 var MainSignUpPage = React.createClass({
 
     render() {
         return (
-            <div>
+            <div className="main-home-page">
-                this is the sing up page
+                This is the sign up page
+                <MainHomePageLoginWidget />
             </div>
         );
     }

src/utils/route-transition.js

@@ -0,0 +1,64 @@
+const React = require('react/addons');
+const { PropTypes } = React;
+const { TransitionMotion, spring } = require('react-motion');
+
+const RouteTransition = React.createClass({
+    propTypes: {
+        pathname: PropTypes.string.isRequired
+    },
+
+    willEnter() {
+        const { children } = this.props;
+
+        return {
+            handler: children,
+            opacity: spring(0, [200,10])
+        };
+    },
+
+    willLeave(key, value) {
+        return {
+            handler: value.handler,
+            opacity: spring(0, [200,10])
+        };
+    },
+
+    getEndValue() {
+        const { children, pathname } = this.props;
+
+        return {
+            [pathname]: {
+                handler: children,
+                opacity: spring(1, [200,10])
+            }
+        };
+    },
+
+    render() {
+        return (
+            <TransitionMotion
+                styles={this.getEndValue()}
+                willEnter={this.willEnter}
+                willLeave={this.willLeave}>
+                {interpolated => {
+                return (<div className="animated-children">
+            {Object.keys(interpolated).map(key =>
+                    <div
+                        key={`${key}-transition`}
+                        style={{
+                            position: 'absolute',
+                            opacity: interpolated[key].opacity
+                        }}
+                    >
+                        {interpolated[key].handler}
+                        {interpolated[key].opacity}
+                    </div>
+            )}
+                </div>);}}
+
+            </TransitionMotion>
+        );
+    }
+});
+
+module.exports = RouteTransition;