Merge pull request #30 from kremalicious/feature/page-transitions

prototype page transitions
2024-12-22 17:23:22 +01:00 · 2018-09-14 21:38:14 +02:00 · 2018-09-14 21:38:14 +02:00 · 7c088ad766
commit 7c088ad766
parent 1b2239cbb5 7080b3c886
18 changed files with 191 additions and 188 deletions
--- a/gatsby-browser.js
+++ b/gatsby-browser.js
@ -1,8 +1,10 @@
-require('./src/styles/global.scss')
+import wrapPageElementWithTransition from './src/helpers/wrapPageElement'
+import './src/styles/global.scss'

-exports.onClientEntry = () => {
-  // IntersectionObserver polyfill for gatsby-image (Safari, IE)
-  if (typeof window.IntersectionObserver === 'undefined') {
-    require('intersection-observer')
-  }
+// IntersectionObserver polyfill for gatsby-image (Safari, IE)
+if (typeof window !== 'undefined' && !window.IntersectionObserver) {
+  import('intersection-observer')
 }
+
+// Page Transitions & Layout
+export const wrapPageElement = wrapPageElementWithTransition
--- a/gatsby-ssr.js
+++ b/gatsby-ssr.js
@ -0,0 +1,4 @@
+import wrapPageElementWithTransition from './src/helpers/wrapPageElement'
+
+// Page Transitions & Layout
+export const wrapPageElement = wrapPageElementWithTransition
--- a/package.json
+++ b/package.json
@ -21,7 +21,7 @@
  },
  "dependencies": {
    "file-saver": "^1.3.8",
-    "gatsby": "^2.0.0-rc.21",
+    "gatsby": "^2.0.0-rc.24",
    "gatsby-image": "^2.0.0-rc.2",
    "gatsby-plugin-manifest": "^2.0.2-rc.1",
    "gatsby-plugin-matomo": "^0.5.0",
@ -29,7 +29,7 @@
    "gatsby-plugin-react-helmet": "^3.0.0-rc.1",
    "gatsby-plugin-sass": "^2.0.0-rc.2",
    "gatsby-plugin-sharp": "^2.0.0-rc.7",
-    "gatsby-plugin-sitemap": "^2.0.0-rc.1",
+    "gatsby-plugin-sitemap": "^2.0.0-rc.2",
    "gatsby-source-filesystem": "^2.0.1-rc.6",
    "gatsby-transformer-json": "^2.1.1-rc.6",
    "gatsby-transformer-sharp": "^2.1.1-rc.3",
@ -39,11 +39,11 @@
    "intersection-observer": "^0.5.0",
    "js-yaml": "^3.12.0",
    "node-sass": "^4.9.3",
-    "react": "^16.5.0",
-    "react-dom": "^16.5.0",
+    "react": "^16.5.1",
+    "react-dom": "^16.5.1",
    "react-helmet": "^5.2.0",
    "react-markdown": "^3.6.0",
-    "react-transition-group": "^2.4.0",
+    "react-pose": "^3.3.0",
    "vcf": "^2.0.1"
  },
  "devDependencies": {
--- a/src/components/Layout.jsx
+++ b/src/components/Layout.jsx
@ -1,28 +1,41 @@
-import React, { Fragment } from 'react'
+import React, { PureComponent, Fragment } from 'react'
 import PropTypes from 'prop-types'
+import posed, { PoseGroup } from 'react-pose'
+import { fadeIn } from './atoms/Transitions'
 import Head from './molecules/Head'
 import Header from './organisms/Header'
 import Footer from './organisms/Footer'
 import styles from './Layout.module.scss'

-const Layout = ({ children, location }) => {
-  const isHomepage = location.pathname === '/'
+const timeout = 250

-  return (
-    <Fragment>
-      <Head />
-      <Header isHomepage={isHomepage} />
+export default class Layout extends PureComponent {
+  static propTypes = {
+    children: PropTypes.any.isRequired,
+    location: PropTypes.object.isRequired
+  }

-      <main className={styles.screen}>{children}</main>
+  render() {
+    const { children, location } = this.props
+    const isHomepage = location.pathname === '/'

-      <Footer />
-    </Fragment>
-  )
+    const RoutesContainer = posed.div(fadeIn)
+
+    return (
+      <Fragment>
+        <Head />
+        <PoseGroup animateOnMount={true}>
+          <RoutesContainer
+            key={location.pathname}
+            delay={timeout}
+            delayChildren={timeout}
+          >
+            <Header isHomepage={isHomepage} />
+            <main className={styles.screen}>{children}</main>
+          </RoutesContainer>
+        </PoseGroup>
+        <Footer />
+      </Fragment>
+    )
+  }
 }
-
-Layout.propTypes = {
-  children: PropTypes.any.isRequired,
-  location: PropTypes.object.isRequired
-}
-
-export default Layout
--- a/src/components/atoms/Animations.jsx
+++ b/src/components/atoms/Animations.jsx
@ -1,21 +0,0 @@
-import React from 'react'
-import CSSTransition from 'react-transition-group/CSSTransition'
-import './Animations.scss'
-
-const Animation = props => <CSSTransition appear={true} in={true} {...props} />
-
-export const FadeIn = props => (
-  <Animation
-    classNames="fadein"
-    timeout={{ enter: 200, exit: 200, appear: 200 }}
-    {...props}
-  />
-)
-
-export const MoveIn = props => (
-  <Animation
-    classNames="movein"
-    timeout={{ enter: 300, exit: 200, appear: 300 }}
-    {...props}
-  />
-)
--- a/src/components/atoms/Animations.scss
+++ b/src/components/atoms/Animations.scss
@ -1,43 +0,0 @@
-.fadein-appear,
-.fadein-enter {
-    opacity: .01;
-
-    &.fadein-appear-active,
-    &.fadein-enter-active {
-        opacity: 1;
-        transition: 200ms ease-in;
-    }
-}
-
-.fadein-exit {
-    opacity: 1;
-    transition: 200ms ease-in;
-
-    &.fadein-exit-active {
-        opacity: .01;
-    }
-}
-
-.movein-appear,
-.movein-enter {
-    opacity: .01;
-    transform: translate3d(0, 3rem, 0);
-
-    &.movein-appear-active,
-    &.movein-enter-active {
-        opacity: 1;
-        transform: translate3d(0, 0, 0);
-        transition: 300ms ease-out;
-    }
-}
-
-.movein-exit {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-    transition: 100ms ease-out;
-
-    &.movein-exit-active {
-        opacity: .01;
-        transform: translate3d(0, 3rem, 0);
-    }
-}
--- a/src/components/atoms/LogoUnit.jsx
+++ b/src/components/atoms/LogoUnit.jsx
@ -1,6 +1,9 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { StaticQuery, graphql } from 'gatsby'
+import posed, { PoseGroup } from 'react-pose'
+import { moveInBottom } from '../atoms/Transitions'
+
 import Logo from '../svg/Logo'
 import styles from './LogoUnit.module.scss'

@ -13,6 +16,8 @@ const query = graphql`
  }
 `

+const Animation = posed.div(moveInBottom)
+
 class LogoUnit extends PureComponent {
  state = { minimal: false }

@ -43,16 +48,20 @@ class LogoUnit extends PureComponent {
          const { minimal } = this.state

          return (
-            <div className={minimal ? styles.minimal : styles.logounit}>
-              <Logo className={styles.logounit__logo} />
-              <h1 className={styles.logounit__title}>
-                {meta.title.toLowerCase()}
-              </h1>
-              <p className={styles.logounit__description}>
-                <span>{'{ '}</span> {meta.tagline.toLowerCase()}{' '}
-                <span>{' }'}</span>
-              </p>
-            </div>
+            <PoseGroup animateOnMount={true}>
+              <Animation>
+                <div className={minimal ? styles.minimal : styles.logounit}>
+                  <Logo className={styles.logounit__logo} />
+                  <h1 className={styles.logounit__title}>
+                    {meta.title.toLowerCase()}
+                  </h1>
+                  <p className={styles.logounit__description}>
+                    <span>{'{ '}</span> {meta.tagline.toLowerCase()}{' '}
+                    <span>{' }'}</span>
+                  </p>
+                </div>
+              </Animation>
+            </PoseGroup>
          )
        }}
      />
--- a/src/components/atoms/LogoUnit.module.scss
+++ b/src/components/atoms/LogoUnit.module.scss
@ -25,13 +25,11 @@
    margin-right: $spacer / 4;
    color: $brand-main;
    line-height: $line-height;
-    transition: color .2s ease-out;
 }

 .logounit__description {
    font-size: $font-size-h4;
    color: $brand-grey;
-    transition: color .2s ease-out;

    :global(.dark) & {
        color: $brand-grey-light;
--- a/src/components/atoms/Transitions.js
+++ b/src/components/atoms/Transitions.js
@ -0,0 +1,30 @@
+export const fadeIn = {
+  enter: {
+    opacity: 1
+  },
+  exit: {
+    opacity: 0
+  }
+}
+
+export const moveInTop = {
+  enter: {
+    y: 0,
+    transition: { type: 'spring' }
+  },
+  exit: {
+    y: '-2rem',
+    transition: { type: 'spring' }
+  }
+}
+
+export const moveInBottom = {
+  enter: {
+    y: 0,
+    transition: { type: 'spring' }
+  },
+  exit: {
+    y: '2rem',
+    transition: { type: 'spring' }
+  }
+}
--- a/src/components/molecules/Availability.jsx
+++ b/src/components/molecules/Availability.jsx
@ -1,7 +1,8 @@
-import React, { Fragment, PureComponent } from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { StaticQuery, graphql } from 'gatsby'
-import { MoveIn } from '../atoms/Animations'
+import posed, { PoseGroup } from 'react-pose'
+import { fadeIn } from '../atoms/Transitions'
 import styles from './Availability.module.scss'

 const query = graphql`
@ -16,6 +17,8 @@ const query = graphql`
  }
 `

+const Animation = posed.aside(fadeIn)
+
 export default class Availability extends PureComponent {
  static propTypes = { hide: PropTypes.bool }

@ -28,25 +31,23 @@ export default class Availability extends PureComponent {
          const { status, available, unavailable } = availability

          return (
-            <Fragment>
-              {!this.props.hide && (
-                <MoveIn>
-                  <aside
-                    className={
-                      status
-                        ? `${styles.availability} ${styles.available}`
-                        : `${styles.availability}`
-                    }
-                  >
-                    <p
-                      dangerouslySetInnerHTML={{
-                        __html: status ? available : unavailable
-                      }}
-                    />
-                  </aside>
-                </MoveIn>
-              )}
-            </Fragment>
+            !this.props.hide && (
+              <PoseGroup animateOnMount={true}>
+                <Animation
+                  className={
+                    status
+                      ? `${styles.availability} ${styles.available}`
+                      : `${styles.availability}`
+                  }
+                >
+                  <p
+                    dangerouslySetInnerHTML={{
+                      __html: status ? available : unavailable
+                    }}
+                  />
+                </Animation>
+              </PoseGroup>
+            )
          )
        }}
      />
--- a/src/components/molecules/Availability.module.scss
+++ b/src/components/molecules/Availability.module.scss
@ -8,7 +8,6 @@
    z-index: 2;
    padding: $spacer / 2;
    display: block;
-    transition: opacity .2s ease-out;

    :global(.dark) & {
        color: $text-color-light--dark;
--- a/src/components/molecules/Networks.jsx
+++ b/src/components/molecules/Networks.jsx
@ -1,7 +1,8 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { StaticQuery, graphql } from 'gatsby'
-import { FadeIn } from '../atoms/Animations'
+import posed, { PoseGroup } from 'react-pose'
+import { moveInTop } from '../atoms/Transitions'

 import Email from '../svg/Email'
 import Blog from '../svg/Blog'
@ -43,6 +44,8 @@ const NetworkIcon = props => {
  }
 }

+const Animation = posed.aside(moveInTop)
+
 export default class Network extends PureComponent {
  static propTypes = {
    minimal: PropTypes.bool,
@ -78,16 +81,16 @@ export default class Network extends PureComponent {

          return (
            !this.props.hide && (
-              <FadeIn>
-                <aside className={this.state.classes}>
+              <PoseGroup animateOnMount={true}>
+                <Animation className={this.state.classes}>
                  {Object.keys(meta.social).map((key, i) => (
                    <a className={styles.link} href={meta.social[key]} key={i}>
                      <NetworkIcon title={key} className={icons.icon} />
                      <span className={styles.title}>{key}</span>
                    </a>
                  ))}
-                </aside>
-              </FadeIn>
+                </Animation>
+              </PoseGroup>
            )
          )
        }}
--- a/src/components/molecules/ThemeSwitch.jsx
+++ b/src/components/molecules/ThemeSwitch.jsx
@ -1,10 +1,15 @@
 import React, { PureComponent, Fragment } from 'react'
 import PropTypes from 'prop-types'
 import Helmet from 'react-helmet'
+import posed, { PoseGroup } from 'react-pose'
+import { fadeIn } from '../atoms/Transitions'
+
 import Day from '../svg/Day'
 import Night from '../svg/Night'
 import styles from './ThemeSwitch.module.scss'

+const Animation = posed.aside(fadeIn)
+
 const ThemeToggle = ({ dark }) => (
  <span id="toggle" className={styles.checkboxContainer} aria-live="assertive">
    <Day className={dark ? null : 'active'} />
@ -60,20 +65,22 @@ export default class ThemeSwitch extends PureComponent {
        <Helmet>
          <body className={this.isDark() ? 'dark' : null} />
        </Helmet>
-        <aside className={styles.themeSwitch}>
-          <label className={styles.checkbox}>
-            <span className={styles.label}>Toggle Night Mode</span>
-            <input
-              onChange={this.handleChange}
-              type="checkbox"
-              name="toggle"
-              value="toggle"
-              aria-describedby="toggle"
-              checked={this.isDark()}
-            />
-            <ThemeToggle dark={this.isDark()} />
-          </label>
-        </aside>
+        <PoseGroup animateOnMount={true}>
+          <Animation className={styles.themeSwitch}>
+            <label className={styles.checkbox}>
+              <span className={styles.label}>Toggle Night Mode</span>
+              <input
+                onChange={this.handleChange}
+                type="checkbox"
+                name="toggle"
+                value="toggle"
+                aria-describedby="toggle"
+                checked={this.isDark()}
+              />
+              <ThemeToggle dark={this.isDark()} />
+            </label>
+          </Animation>
+        </PoseGroup>
      </Fragment>
    )
  }
--- a/src/helpers/wrapPageElement.jsx
+++ b/src/helpers/wrapPageElement.jsx
@ -0,0 +1,8 @@
+import React from 'react'
+import Layout from '../components/Layout'
+
+const wrapPageElement = ({ element, props }) => (
+  <Layout {...props}>{element}</Layout>
+)
+
+export default wrapPageElement
--- a/src/pages/404.jsx
+++ b/src/pages/404.jsx
@ -2,7 +2,6 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { Link } from 'gatsby'
 import giphyAPI from 'giphy-js-sdk-core'
-import Layout from '../components/Layout'
 import Content from '../components/atoms/Content'
 import Button from '../components/atoms/Button'
 import './404.scss'
@ -42,24 +41,22 @@ export default class NotFound extends Component {

  render() {
    return (
-      <Layout location={this.props.location}>
-        <Content className="content content--404">
-          <h1>Shenanigans, page not found.</h1>
-          <p>
-            You might want to check the url, or{' '}
-            <Link to={'/'}>go back to the homepage</Link>. Or just check out
-            some cat fail gifs, entirely your choice.
-          </p>
+      <Content className="content content--404">
+        <h1>Shenanigans, page not found.</h1>
+        <p>
+          You might want to check the url, or{' '}
+          <Link to={'/'}>go back to the homepage</Link>. Or just check out some
+          cat fail gifs, entirely your choice.
+        </p>

-          <video className="gif" src={this.state.gif} autoPlay loop />
+        <video className="gif" src={this.state.gif} autoPlay loop />

-          <div>
-            <Button onClick={this.handleClick}>
-              Show me another cat fail gif
-            </Button>
-          </div>
-        </Content>
-      </Layout>
+        <div>
+          <Button onClick={this.handleClick}>
+            Show me another cat fail gif
+          </Button>
+        </div>
+      </Content>
    )
  }
 }
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@ -1,33 +1,30 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Link, graphql } from 'gatsby'
-import Layout from '../components/Layout'
 import ProjectImage from '../components/atoms/ProjectImage'
 import FullWidth from '../components/atoms/FullWidth'
 import styles from './index.module.scss'

-const Home = ({ data, location }) => {
+const Home = ({ data }) => {
  const projects = data.allProjectsYaml.edges

  return (
-    <Layout location={location}>
-      <FullWidth>
-        <div className={styles.projects}>
-          {projects.map(({ node }) => {
-            const { slug, title, img } = node
+    <FullWidth>
+      <div className={styles.projects}>
+        {projects.map(({ node }) => {
+          const { slug, title, img } = node

-            return (
-              <article className={styles.project} key={slug}>
-                <Link to={slug}>
-                  <h1 className={styles.title}>{title}</h1>
-                  <ProjectImage fluid={img.childImageSharp.fluid} alt={title} />
-                </Link>
-              </article>
-            )
-          })}
-        </div>
-      </FullWidth>
-    </Layout>
+          return (
+            <article className={styles.project} key={slug}>
+              <Link to={slug}>
+                <h1 className={styles.title}>{title}</h1>
+                <ProjectImage fluid={img.childImageSharp.fluid} alt={title} />
+              </Link>
+            </article>
+          )
+        })}
+      </div>
+    </FullWidth>
  )
 }

--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@ -29,7 +29,7 @@ body {
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    background: $body-background-color;
-    transition: background .6s $easing;
+    transition: background .2s $easing;

    &.dark {
        background-color: $body-background-color--dark;
--- a/src/templates/Project.jsx
+++ b/src/templates/Project.jsx
@ -1,9 +1,8 @@
-import React from 'react'
+import React, { Fragment } from 'react'
 import PropTypes from 'prop-types'
 import Helmet from 'react-helmet'
 import ReactMarkdown from 'react-markdown'
 import { graphql } from 'gatsby'
-import Layout from '../components/Layout'
 import Content from '../components/atoms/Content'
 import FullWidth from '../components/atoms/FullWidth'
 import ProjectImage from '../components/atoms/ProjectImage'
@ -31,7 +30,7 @@ const ProjectImages = ({ projectImages, title }) => (
  </FullWidth>
 )

-const Project = ({ data, location }) => {
+const Project = ({ data }) => {
  const project = data.projectsYaml
  const projectImages = data.projectImages.edges
  const { title, links, techstack } = project
@ -39,7 +38,7 @@ const Project = ({ data, location }) => {
  const descriptionWithLineBreaks = description.split('\n').join('\n\n')

  return (
-    <Layout location={location}>
+    <Fragment>
      <Helmet title={title} />

      <SEO project={project} />
@ -57,7 +56,7 @@ const Project = ({ data, location }) => {
      </article>

      <ProjectNav slug={project.slug} />
-    </Layout>
+    </Fragment>
  )
 }