From 026edb8504b039b2c9ff1f44bdee35260cd87a65 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sun, 22 Apr 2018 20:02:03 +0200
Subject: [PATCH] page animations

---
 .../atoms/{FadeIn.js => Animations.js}        | 10 +++---
 src/components/atoms/Animations.scss          | 26 +++++++++++++++
 src/components/atoms/FadeIn.scss              |  8 -----
 src/components/molecules/Availability.js      |  2 +-
 src/components/molecules/Social.js            |  2 +-
 src/components/organisms/Header.js            |  2 +-
 src/layouts/index.js                          | 33 +++++++++++++++++--
 src/layouts/index.scss                        |  9 +++++
 8 files changed, 72 insertions(+), 20 deletions(-)
 rename src/components/atoms/{FadeIn.js => Animations.js} (62%)
 create mode 100644 src/components/atoms/Animations.scss
 delete mode 100644 src/components/atoms/FadeIn.scss

diff --git a/src/components/atoms/FadeIn.js b/src/components/atoms/Animations.js
similarity index 62%
rename from src/components/atoms/FadeIn.js
rename to src/components/atoms/Animations.js
index 8fe5769..ae4fe59 100644
--- a/src/components/atoms/FadeIn.js
+++ b/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
diff --git a/src/components/atoms/Animations.scss b/src/components/atoms/Animations.scss
new file mode 100644
index 0000000..758e569
--- /dev/null
+++ b/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;
+    }
+}
diff --git a/src/components/atoms/FadeIn.scss b/src/components/atoms/FadeIn.scss
deleted file mode 100644
index 6f90a92..0000000
--- a/src/components/atoms/FadeIn.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.fadein-appear {
-    opacity: .01;
-
-    &.fadein-appear-active {
-        opacity: 1;
-        transition: opacity 400ms ease-in;
-    }
-}
diff --git a/src/components/molecules/Availability.js b/src/components/molecules/Availability.js
index f7021c2..fd1d146 100644
--- a/src/components/molecules/Availability.js
+++ b/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 }) => {
diff --git a/src/components/molecules/Social.js b/src/components/molecules/Social.js
index 33f62b0..5ca9cee 100644
--- a/src/components/molecules/Social.js
+++ b/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 }) => {
diff --git a/src/components/organisms/Header.js b/src/components/organisms/Header.js
index 9025f4a..c9526a0 100644
--- a/src/components/organisms/Header.js
+++ b/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'
diff --git a/src/layouts/index.js b/src/layouts/index.js
index 88488d4..191ddfc 100644
--- a/src/layouts/index.js
+++ b/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 {
diff --git a/src/layouts/index.scss b/src/layouts/index.scss
index 5d10ce1..4dfdf04 100644
--- a/src/layouts/index.scss
+++ b/src/layouts/index.scss
@@ -112,3 +112,12 @@ svg {
     flex: 1;
     padding: $spacer;
 }
+
+.transition-group {
+    position: relative;
+}
+
+.transition-container {
+    position: relative;
+    width: 100%;
+}