(∩◕ヮ◕)⊃━ ✧.*･｡ﾟ PAGE TRANSITIONS

Author: xavxyz

.babelrc

@@ -0,0 +1,3 @@
+{
+  "plugins": [["styled-jsx/babel", { "plugins": ["styled-jsx-plugin-sass"] }]]
+}

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+.next

README.md

@@ -0,0 +1,35 @@
+# Page Transitions Travelapp
+
+### Fork
+
+👋, hello there! This repository is a rewrite with React & Next.js of [Sarah Drasner](https://twitter.com/sarah_edo)'s orginal work with [Vue & Nuxt](https://github.com/sdras/page-transitions-travelapp).
+
+Live demo: [https://travel.now.sh](https://page-transitions.now.sh)
+
+### Original
+
+This demo shows an example of how to acheive native-like page transitions on the web. There's much to be improved here- it's not meant to be a full-fledged web application, just a quick demo to show how this kind of implementation could theoretically work. These concepts can and should be expressed differently in your own application, the sky's the limit here! This is created with Nuxt and Vue.
+
+Article explaining the demo is available at
+[https://css-tricks.com/native-like-animations-for-page-transitions-on-the-web](https://css-tricks.com/native-like-animations-for-page-transitions-on-the-web)
+
+Live demo at
+[https://page-transitions.com/](https://page-transitions.com/)
+
+See the page transitions travel app demo for a real-life use case: [https://github.com/sdras/page-transitions-travelapp](https://github.com/sdras/page-transitions-travelapp)
+
+## Build Setup
+
+```bash
+# install dependencies
+$ npm install # Or yarn install
+
+# serve with hot reload at localhost:3000
+$ npm run dev
+
+# build for production and launch server
+$ npm run build
+$ npm start
+```
+
+For detailed explanation on how things work, checkout the [Next.js docs](https://github.com/zeit/next.js).

components/AppFooter.js

@@ -0,0 +1,56 @@
+import React from 'react';
+
+export default () => (
+  <footer>
+    <div>
+      Original project by{' '}
+      <a href="https://twitter.com/sarah_edo" target="_blank">
+        sarah_edo
+      </a>, built with{' '}
+      <a
+        href="https://github.com/sdras/page-transitions-travelapp"
+        target="_blank"
+      >
+        Vue & Nuxt (code)
+      </a>
+    </div>
+    <div>
+      You are viewing a fork adapted by{' '}
+      <a href="https://twitter.com/xavczen" target="_blank">
+        xavczen
+      </a>, built with{' '}
+      <a
+        href="https://github.com/xavczen/nextjs-transitions-travelapp"
+        target="_blank"
+      >
+        React & Next (code)
+      </a>.
+    </div>
+    <style jsx>
+      {`
+        footer {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          padding: 10px;
+          background: black;
+          color: white;
+          text-align: center;
+          letter-spacing: 0.03em;
+          margin-top: 30px;
+          width: 100%;
+        }
+
+        a,
+        a:visited,
+        a:active {
+          color: white;
+          font-weight: bold;
+          text-decoration: none;
+          padding-left: 6px;
+        }
+      `}
+    </style>
+  </footer>
+);

components/AppMenuDrawer.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import Link from 'next/link';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
+import { TweenMax, Sine } from 'gsap';
+
+export default class AppMenuDrawer extends React.Component {
+  menuRef = React.createRef();
+
+  componentDidMount() {
+    const menuEl = this.menuRef.current;
+
+    TweenMax.set(menuEl, {
+      opacity: 0,
+      scale: 0,
+      transformOrigin: '100% 0%',
+    });
+
+    TweenMax.set(menuEl.childNodes, {
+      opacity: 0,
+    });
+
+    TweenMax.fromTo(
+      menuEl,
+      0.2,
+      {
+        opacity: 0,
+        scale: 0,
+      },
+      {
+        opacity: 1,
+        scale: 1,
+        ease: Sine.easeOut,
+      }
+    );
+
+    TweenMax.staggerFromTo(
+      menuEl.childNodes,
+      0.45,
+      {
+        opacity: 0,
+      },
+      {
+        delay: 0.1,
+        opacity: 1,
+        ease: Sine.easeOut,
+      },
+      0.04
+    );
+  }
+
+  render() {
+    const { selectedUser } = this.props;
+
+    return (
+      <div className="menudrawer" ref={this.menuRef}>
+        <Link href="/">
+          <a>{firstName(selectedUser.name)}'s Home</a>
+        </Link>
+        <br />
+        <Link href="/place">
+          <a>{firstName(selectedUser.name)}'s Places</a>
+        </Link>
+        <br />
+        <Link href="/group">
+          <a>{firstName(selectedUser.name)}'s Group Trips</a>
+        </Link>
+        <style jsx>
+          {`
+            div {
+              background: rgba(0, 0, 0, 0.8);
+              line-height: 1.8;
+              text-align: right;
+              position: absolute;
+              right: 0px;
+              top: 45px;
+              padding: 20px;
+              border-radius: 4px;
+              z-index: 10000;
+            }
+
+            a,
+            a:visited,
+            a:active {
+              cursor: pointer;
+              color: white;
+            }
+          `}
+        </style>
+      </div>
+    );
+  }
+}
+
+const firstName = input => {
+  const lastIndex = input.lastIndexOf(' ');
+  return input.substring(0, lastIndex);
+};