animation tweaks

src/components/molecules/Social.jsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { OutboundLink } from 'gatsby-plugin-google-analytics'
 import { FadeIn } from '../atoms/Animations'
@@ -34,24 +34,22 @@ const Social = ({ meta, minimal, hide }) => {
   const classes = minimal ? 'social social--minimal' : 'social'
 
   return (
-    <Fragment>
+    !hide && (
-      {!hide && (
+      <FadeIn timeout={{ enter: 200, exit: 0, appear: 200 }}>
-        <FadeIn>
+        <aside className={classes}>
-          <aside className={classes}>
+          {Object.keys(social).map((key, i) => (
-            {Object.keys(social).map((key, i) => (
+            <OutboundLink
-              <OutboundLink
+              className="social__link"
-                className="social__link"
+              href={social[key]}
-                href={social[key]}
+              key={i}
-                key={i}
+              title={key}
-                title={key}
+            >
-              >
+              <SocialIcon title={key} className="icon" />
-                <SocialIcon title={key} className="icon" />
+            </OutboundLink>
-              </OutboundLink>
+          ))}
-            ))}
+        </aside>
-          </aside>
+      </FadeIn>
-        </FadeIn>
+    )
-      )}
-    </Fragment>
   )
 }
 

src/components/molecules/Social.scss

@@ -2,9 +2,9 @@
 
 .social {
     margin-top: $spacer * 2;
+    width: 100%;
     display: flex;
     justify-content: center;
-    width: 100%;
 }
 
 .social__link {
@@ -16,7 +16,6 @@
     align-items: center;
     justify-content: center;
     border-radius: .25rem;
-    transition-property: transform, background, box-shadow;
 
     @media (min-width: 30rem) {
         margin-left: $spacer / 2;

src/components/organisms/Header.jsx

@@ -1,31 +1,44 @@
-import React from 'react'
+import React, { Component } from 'react'
 import Link from 'gatsby-link'
 import PropTypes from 'prop-types'
+import { FadeIn } from '../atoms/Animations'
 import Social from '../molecules/Social'
 import Availability from '../molecules/Availability'
 import { ReactComponent as Logo } from '../../images/logo.svg'
 import './Header.scss'
 
-const Header = ({ meta, isHomepage }) => {
+class Header extends Component {
-  const classes = isHomepage ? 'header' : 'header header--minimal'
+  render() {
+    const isHomepage = this.props.isHomepage
+    const meta = this.props.meta
 
-  return (
+    let classes = 'header'
-    <header className={classes}>
+    if (!isHomepage) {
-      <Link className="header__name" to={'/'}>
+      classes += ' header--minimal'
-        <Logo className="header__logo" />
+    }
-        <h1 className="header__title">{meta.title.toLowerCase()}</h1>
-        <p className="header__description">
-          <span>{'{ '}</span> {meta.tagline.toLowerCase()} <span>{' }'}</span>
-        </p>
-      </Link>
 
-      <Social meta={meta} hide={!isHomepage} />
+    return (
-      <Availability
+      <header className={classes}>
-        meta={meta}
+        <FadeIn>
-        hide={!isHomepage && !meta.availability.status}
+          <Link className="header__name" to={'/'}>
-      />
+            <Logo className="header__logo" />
-    </header>
+            <h1 className="header__title">{meta.title.toLowerCase()}</h1>
-  )
+            <p className="header__description">
+              <span>{'{ '}</span> {meta.tagline.toLowerCase()}{' '}
+              <span>{' }'}</span>
+            </p>
+          </Link>
+        </FadeIn>
+
+        <Social meta={meta} hide={!isHomepage} />
+
+        <Availability
+          meta={meta}
+          hide={!isHomepage && !meta.availability.status}
+        />
+      </header>
+    )
+  }
 }
 
 Header.propTypes = {

src/layouts/index.jsx

@@ -19,6 +19,8 @@ class TransitionHandler extends Component {
   }
 }
 
+const Main = ({ children }) => <main className="screen">{children}</main>
+
 const TemplateWrapper = ({ data, location, children }) => {
   const meta = data.dataYaml
   const isHomepage = location.pathname === '/'
@@ -28,18 +30,16 @@ const TemplateWrapper = ({ data, location, children }) => {
       <Head meta={meta} location={location} />
       <Header meta={meta} isHomepage={isHomepage} />
 
-      <main className="screen">
+      <TransitionGroup component={Main} appear={true}>
-        <TransitionGroup appear={true}>
+        <FadeIn
-          <FadeIn
+          key={location.pathname}
-            key={location.pathname}
+          timeout={{ enter: 200, exit: 150, appear: 200 }}
-            timeout={{ enter: 200, exit: 150, appear: 200 }}
+        >
-          >
+          <TransitionHandler location={location}>
-            <TransitionHandler location={location}>
+            {children()}
-              {children()}
+          </TransitionHandler>
-            </TransitionHandler>
+        </FadeIn>
-          </FadeIn>
+      </TransitionGroup>
-        </TransitionGroup>
-      </main>
 
       <Footer meta={meta} />
     </div>
@@ -51,6 +51,10 @@ TransitionHandler.propTypes = {
   location: PropTypes.object.isRequired,
 }
 
+Main.propTypes = {
+  children: PropTypes.any,
+}
+
 TemplateWrapper.propTypes = {
   children: PropTypes.func,
   data: PropTypes.object.isRequired,