diff --git a/js/src/common/utils/Drawer.js b/js/src/common/utils/Drawer.js
index 0d0efb46ed..d0bfa7da6f 100644
--- a/js/src/common/utils/Drawer.js
+++ b/js/src/common/utils/Drawer.js
@@ -31,7 +31,24 @@ export default class Drawer {
    * @public
    */
   hide() {
-    $('#app').removeClass('drawerOpen');
+    /**
+     * As part of hiding the drawer, this function also ensures that the drawer
+     * correctly animates out, while ensuring it is not part of the navigation
+     * tree while off-screen.
+     *
+     * More info: https://github.com/flarum/core/pull/2666#discussion_r595381014
+     */
+
+    const $app = $('#app');
+
+    if (!$app.hasClass('drawerOpen')) return;
+
+    const $drawer = $('#drawer');
+
+    // Used to prevent `visibility: hidden` from breaking the exit animation
+    $drawer.css('visibility', 'visible').one('transitionend', () => $drawer.css('visibility', ''));
+
+    $app.removeClass('drawerOpen');
 
     if (this.$backdrop) this.$backdrop.remove();
   }
diff --git a/less/common/App.less b/less/common/App.less
index faafe7f01b..7acd8cd75e 100644
--- a/less/common/App.less
+++ b/less/common/App.less
@@ -123,6 +123,9 @@
 // the left side of the screen. On other devices, the drawer has no specific
 // appearance.
 @media @phone {
+  .App:not(.drawerOpen) .App-drawer {
+    visibility: hidden;
+  }
   .drawerOpen {
     overflow: hidden;
   }