page animations

src/components/atoms/Animations.js

@@ -1,15 +1,13 @@
 import React from 'react'
 import CSSTransition from 'react-transition-group/CSSTransition'
-import './FadeIn.scss'
+import './Animations.scss'
 
-const FadeIn = props => (
+export const FadeIn = props => (
   <CSSTransition
-    {...props}
     classNames="fadein"
     appear={true}
     in={true}
-    timeout={400}
+    timeout={{ enter: 300, exit: 200, appear: 300 }}
+    {...props}
   />
 )
-
-export default FadeIn

src/components/atoms/Animations.scss

@@ -0,0 +1,26 @@
+.fadein-appear {
+    opacity: .01;
+
+    &.fadein-appear-active {
+        opacity: 1;
+        transition: 400ms ease-in;
+    }
+}
+
+.fadein-enter {
+    opacity: .01;
+
+    &.fadein-enter-active {
+        opacity: 1;
+        transition: 300ms ease-out;
+    }
+}
+
+.fadein-exit {
+    opacity: 1;
+    transition: 300ms ease-in;
+
+    &.fadein-exit-active {
+        opacity: .01;
+    }
+}

src/components/atoms/FadeIn.scss

@@ -1,8 +0,0 @@
-.fadein-appear {
-    opacity: .01;
-
-    &.fadein-appear-active {
-        opacity: 1;
-        transition: opacity 400ms ease-in;
-    }
-}

src/components/molecules/Availability.js

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react'
 import PropTypes from 'prop-types'
-import FadeIn from '../atoms/FadeIn'
+import { FadeIn } from '../atoms/Animations'
 import './Availability.scss'
 
 const Availability = ({ meta, hide }) => {

src/components/molecules/Social.js

@@ -2,7 +2,7 @@ import React, { Fragment } from 'react'
 import PropTypes from 'prop-types'
 import { OutboundLink } from 'gatsby-plugin-google-analytics'
 import { Email, Blog, Twitter, GitHub, Dribbble } from '../atoms/Icons'
-import FadeIn from '../atoms/FadeIn'
+import { FadeIn } from '../atoms/Animations'
 import './Social.scss'
 
 const SocialIcon = ({ title }) => {

src/components/organisms/Header.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import Link from 'gatsby-link'
 import PropTypes from 'prop-types'
-import FadeIn from '../atoms/FadeIn'
+import { FadeIn } from '../atoms/Animations'
 import { Logo } from '../atoms/Icons'
 import Social from '../molecules/Social'
 import Availability from '../molecules/Availability'

src/layouts/index.js

@@ -1,11 +1,25 @@
-import React from 'react'
+import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import withRouter from 'react-router-dom/withRouter'
 import Typekit from 'react-typekit'
+import TransitionGroup from 'react-transition-group/TransitionGroup'
 import Head from '../components/atoms/Head'
 import Header from '../components/organisms/Header'
 import Footer from '../components/organisms/Footer'
+import { FadeIn } from  '../components/atoms/Animations'
 import './index.scss'
 
+class TransitionHandler extends Component {
+  shouldComponentUpdate() {
+    return this.props.location.pathname === window.location.pathname
+  }
+
+  render() {
+    const { children } = this.props
+    return <div className="transition-container">{children}</div>
+  }
+}
+
 const TemplateWrapper = ({ data, location, children }) => {
   const meta = data.dataJson
   const isHomepage = location.pathname === '/'
@@ -16,20 +30,33 @@ const TemplateWrapper = ({ data, location, children }) => {
       <Typekit kitId={meta.typekit} />
       <Header meta={meta} isHomepage={isHomepage} />
 
-      {children()}
+      <TransitionGroup appear={true}>
+        <FadeIn
+          key={location.pathname}
+          timeout={{ enter: 300, exit: 200, appear: 300 }}>
+          <TransitionHandler location={location}>
+            {children()}
+          </TransitionHandler>
+        </FadeIn>
+      </TransitionGroup>
 
       <Footer meta={meta} />
     </div>
   )
 }
 
+TransitionHandler.propTypes = {
+  children: PropTypes.any,
+  location: PropTypes.object.isRequired,
+}
+
 TemplateWrapper.propTypes = {
   children: PropTypes.func,
   data: PropTypes.object.isRequired,
   location: PropTypes.object.isRequired,
 }
 
-export default TemplateWrapper
+export default withRouter(TemplateWrapper)
 
 export const query = graphql`
   query metaQuery {

src/layouts/index.scss

@@ -112,3 +112,12 @@ svg {
     flex: 1;
     padding: $spacer;
 }
+
+.transition-group {
+    position: relative;
+}
+
+.transition-container {
+    position: relative;
+    width: 100%;
+}