diff --git a/src/docs/App.vue b/src/docs/App.vue
index 65513ff..db4a64e 100644
--- a/src/docs/App.vue
+++ b/src/docs/App.vue
@@ -141,7 +141,9 @@
       </div>
     </md-sidenav>
 
-    <router-view></router-view>
+    <transition name="md-router">
+      <router-view></router-view>
+    </transition>
   </div>
 </template>
 
@@ -280,6 +282,31 @@
     flex: 1;
     overflow: auto;
   }
+
+  .md-router-enter-active,
+  .md-router-leave-active {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 280px;
+    transition: $swift-ease-out;
+  }
+
+  .md-router-enter,
+  .md-router-leave-active {
+    opacity: 0;
+  }
+
+  .md-router-enter {
+    .single-page-banner .md-toolbar {
+      min-height: 64px;
+      padding-top: 0;
+
+      .md-title {
+        font-size: 20px;
+      }
+    }
+  }
 </style>
 
 <script>
diff --git a/src/docs/components/single-page-banner.vue b/src/docs/components/single-page-banner.vue
index 42a64d0..2363c1c 100644
--- a/src/docs/components/single-page-banner.vue
+++ b/src/docs/components/single-page-banner.vue
@@ -15,6 +15,8 @@
 </template>
 
 <style lang="scss">
+  @import '../../core/stylesheets/variables.scss';
+
   .single-page-banner {
     min-height: 256px;
     padding-top: 98px;
@@ -23,6 +25,7 @@
     right: 0;
     left: 0;
     z-index: 3;
+    transition: $swift-ease-out;
     color: #fff !important;
 
     .md-title:first-child {
@@ -30,6 +33,7 @@
       font-size: 45px;
       font-weight: 400;
       line-height: 1.3em;
+      transition: $swift-ease-out;
     }
   }