diff --git a/package-lock.json b/package-lock.json
index 62fbcf1..d12ef88 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15013,6 +15013,15 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-spring": {
+      "version": "8.0.27",
+      "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-8.0.27.tgz",
+      "integrity": "sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "prop-types": "^15.5.8"
+      }
+    },
     "react-style-singleton": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-1.1.1.tgz",
diff --git a/package.json b/package.json
index 6c99490..316ec3a 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-helmet": "^5.2.0",
+    "react-spring": "^8.0.27",
     "rebass": "^3.1.1",
     "styled-components": "^5.0.0-beta.8"
   },
diff --git a/src/templates/postPage.js b/src/templates/postPage.js
index 28de1e2..4d54e65 100644
--- a/src/templates/postPage.js
+++ b/src/templates/postPage.js
@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { useSpring, animated } from 'react-spring';
 import PropTypes from 'prop-types';
 import { graphql } from 'gatsby';
 import Layout from 'components/layout';
@@ -8,31 +9,44 @@ import { ResponsiveColumns } from 'containers/responsiveColumns';
 import PostColumn from './postPage/postColumn.css';
 import PostCard from './postPage/postCard.css';
 
-const PostPage = ({ data: { post, newer, older } }) => (
-  <Layout
-    pageTitle={post.frontmatter.title}
-    pageDescription={post.frontmatter.description}
-    pageImage={post.frontmatter.featuredImage.childImageSharp.fixed.src}
-  >
-    <ResponsiveColumns p={[0, '3em', '4em']} pb={['2em', '3em', '4em']}>
-      <TableOfContents tableOfContents={post.tableOfContents} />
-      <PostColumn className="wide">
-        <div className="post-date">{post.frontmatter.date}</div>
-        <div className="post-tags">
-          {post.frontmatter.tags.map((tag, i) => (
-            <span key={i}>#{tag}</span>
-          ))}
-        </div>
-        <PostCard
-          className="post-body"
-          m="20px 0"
-          dangerouslySetInnerHTML={{ __html: post.html }}
+const AnimatedTOC = animated(TableOfContents);
+
+const PostPage = ({ data: { post, newer, older } }) => {
+  const [isNavOpen, setNavOpen] = useState(false);
+  const navAnimation = useSpring({
+    transform: isNavOpen ? 'translate3d(0, 0, 0)' : 'translate3d(-200%, 0, 0)',
+  });
+
+  return (
+    <Layout
+      pageTitle={post.frontmatter.title}
+      pageDescription={post.frontmatter.description}
+      pageImage={post.frontmatter.featuredImage.childImageSharp.fixed.src}
+    >
+      <button onClick={() => setNavOpen(!isNavOpen)}>Menu</button>
+      <ResponsiveColumns p={[0, '3em', '4em']} pb={['2em', '3em', '4em']}>
+        <AnimatedTOC
+          style={navAnimation}
+          tableOfContents={post.tableOfContents}
         />
-        <Navigation newer={newer} older={older} />
-      </PostColumn>
-    </ResponsiveColumns>
-  </Layout>
-);
+        <PostColumn className="wide">
+          <div className="post-date">{post.frontmatter.date}</div>
+          <div className="post-tags">
+            {post.frontmatter.tags.map((tag, i) => (
+              <span key={i}>#{tag}</span>
+            ))}
+          </div>
+          <PostCard
+            className="post-body"
+            m="20px 0"
+            dangerouslySetInnerHTML={{ __html: post.html }}
+          />
+          <Navigation newer={newer} older={older} />
+        </PostColumn>
+      </ResponsiveColumns>
+    </Layout>
+  );
+};
 
 PostPage.propTypes = {
   data: PropTypes.shape({