diff --git a/src/components/AdjustableSidebarWidth.vue b/src/components/AdjustableSidebarWidth.vue
index a7b46e605..1c6446c68 100644
--- a/src/components/AdjustableSidebarWidth.vue
+++ b/src/components/AdjustableSidebarWidth.vue
@@ -464,7 +464,7 @@ export default {
     left: 0;
     z-index: $nav-z-index + 1;
     transform: translateX(-100%);
-    transition: transform 0.15s ease-in;
+    transition: transform $nav-time-transition ease-in;
     left: 0;
 
     :deep(.aside-animated-child) {
@@ -477,8 +477,8 @@ export default {
       :deep(.aside-animated-child) {
         --index: 0;
         opacity: 1;
-        transition: opacity 0.15s linear;
-        transition-delay: calc(var(--index) * 0.15s + 0.15s);
+        transition: opacity $nav-time-transition linear;
+        transition-delay: calc(var(--index) * $nav-time-transition + $nav-time-transition);
       }
     }
 
diff --git a/src/components/DocumentationLayout.vue b/src/components/DocumentationLayout.vue
index 53a9c47dd..37400e792 100644
--- a/src/components/DocumentationLayout.vue
+++ b/src/components/DocumentationLayout.vue
@@ -245,7 +245,7 @@ export default {
 }
 
 .documentation-layout {
-  --delay: 1s;
+  --delay: $nav-time-transition;
   display: flex;
   flex-flow: column;
   background: var(--colors-text-background, var(--color-text-background));
diff --git a/src/styles/core/_vars.scss b/src/styles/core/_vars.scss
index 493827f08..b84ac3fb6 100644
--- a/src/styles/core/_vars.scss
+++ b/src/styles/core/_vars.scss
@@ -72,6 +72,7 @@ $nav-card-vertical-spacing: 10px;
 $nav-card-horizontal-spacing: 10px;
 $nav-card-horizontal-spacing-large: $nav-card-horizontal-spacing * 2;
 $nav-card-horizontal-spacing-small: $nav-card-horizontal-spacing * 0.5;
+$nav-time-transition: 0.15s;
 
 // Small vp padding and width
 $small-viewport-content-padding: 20px !default;