route animations

package.json

@@ -25,7 +25,8 @@
     "ms": "^2.1.1",
     "react": "^16.8.6",
     "react-blockies": "^1.4.1",
-    "react-dom": "^16.8.6"
+    "react-dom": "^16.8.6",
+    "react-pose": "^4.0.8"
   },
   "devDependencies": {
     "@babel/core": "^7.4.4",

src/App.css

@@ -77,7 +77,13 @@ a h1 {
     overflow-y: auto;
 }
 
-.app > div {
+.app > div,
+.app > div > div {
+    width: 100%;
+    height: 100%;
+}
+
+.app > div > div {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -95,7 +101,8 @@ a h1 {
     background: #fff;
     border-radius: 5px;
     border: .1rem solid #e2e2e2;
-    animation: fadein .5s .5s ease-out;
+
+    /* animation: fadein .5s .5s ease-out; */
 }
 
 .dark .box {

src/App.jsx

@@ -1,11 +1,8 @@
 import React, { PureComponent } from 'react'
-import {
-  Router,
-  createMemorySource,
-  createHistory,
-  LocationProvider
-} from '@reach/router'
+import PropTypes from 'prop-types'
+import { Router, Location } from '@reach/router'
 import { webFrame } from 'electron'
+import posed, { PoseGroup } from 'react-pose'
 import AppProvider from './store/AppProvider'
 import Titlebar from './components/Titlebar'
 import Home from './screens/Home'
@@ -18,9 +15,41 @@ import './App.css'
 webFrame.setVisualZoomLevelLimits(1, 1)
 webFrame.setLayoutZoomLevelLimits(0, 0)
 
-// https://github.com/reach/router/issues/25
-const source = createMemorySource('/')
-const history = createHistory(source)
+const Animation = posed.div({
+  enter: {
+    y: 0,
+    opacity: 1,
+    delay: 100,
+    transition: {
+      type: 'spring',
+      stiffness: 500,
+      damping: 25,
+      restDelta: 0.5,
+      restSpeed: 10
+    }
+  },
+  exit: {
+    y: 50,
+    opacity: 0,
+    transition: { duration: 150 }
+  }
+})
+
+const PosedRouter = ({ children }) => (
+  <Location>
+    {({ location }) => (
+      <PoseGroup>
+        <Animation key={location.key}>
+          <Router location={location}>{children}</Router>
+        </Animation>
+      </PoseGroup>
+    )}
+  </Location>
+)
+
+PosedRouter.propTypes = {
+  children: PropTypes.any.isRequired
+}
 
 export default class App extends PureComponent {
   render() {
@@ -28,12 +57,10 @@ export default class App extends PureComponent {
       <AppProvider>
         <Titlebar />
         <div className="app">
-          <LocationProvider history={history}>
-            <Router>
-              <Home path="/" default />
-              <Preferences path="preferences" />
-            </Router>
-          </LocationProvider>
+          <PosedRouter>
+            <Home path="/" default />
+            <Preferences path="/preferences" />
+          </PosedRouter>
         </div>
       </AppProvider>
     )

src/screens/Home.jsx

@@ -18,7 +18,7 @@ export default class Home extends PureComponent {
     return (
       <>
         <main className="main box">
-          <Link className="preferences-link" to="preferences">
+          <Link className="preferences-link" to="/preferences">
             <IconCog />
           </Link>
 

src/screens/Preferences.css

@@ -1,7 +1,6 @@
 .preferences {
     text-align: left;
     width: 100%;
-    margin-top: 7vh;
     position: relative;
 }