diff --git a/src/Phoenix.vue b/src/Phoenix.vue
index 2b13e089b24..4cb24ef277d 100644
--- a/src/Phoenix.vue
+++ b/src/Phoenix.vue
@@ -6,17 +6,19 @@
         <router-view name="fullscreen" />
       </template>
       <div v-else key="core-content" class="uk-height-1-1 uk-flex uk-flex-row uk-flex-row">
-        <oc-sidebar
-          v-if="isSidebarVisible"
-          v-touch:swipe.left="handleNavSwipe"
-          class="oc-app-navigation"
-          :logo-img="logoImage"
-          :product-name="productName"
-          :nav-items="navItems"
-          :class="sidebarClasses"
-          :fixed="isSidebarFixed"
-          @closed="toggleAppNavigationVisibility"
-        />
+        <transition :name="appNavigationAnimation">
+          <oc-sidebar
+            v-if="isSidebarVisible"
+            v-touch:swipe.left="handleNavSwipe"
+            class="oc-app-navigation"
+            :logo-img="logoImage"
+            :product-name="productName"
+            :nav-items="navItems"
+            :class="sidebarClasses"
+            :fixed="isSidebarFixed"
+            @close="toggleAppNavigationVisibility"
+          />
+        </transition>
         <div class="uk-width-expand">
           <top-bar
             class="uk-width-expand"
@@ -140,6 +142,14 @@ export default {
 
     isSidebarVisible() {
       return this.windowWidth >= 1200 || this.appNavigationVisible
+    },
+
+    appNavigationAnimation() {
+      if (this.windowWidth > 960) {
+        return 'push-right'
+      }
+
+      return 'fade'
     }
   },
   watch: {