diff --git a/layout/_scripts/noscript.swig b/layout/_scripts/noscript.swig
index 6e9457b8e5..9249df52f5 100644
--- a/layout/_scripts/noscript.swig
+++ b/layout/_scripts/noscript.swig
@@ -1,6 +1,5 @@
 <noscript>
   <style>
-  .use-motion .motion-element,
   .use-motion .brand,
   .use-motion .menu-item,
   .sidebar-inner,
diff --git a/source/css/_common/components/sidebar/sidebar.styl b/source/css/_common/components/sidebar/sidebar.styl
index c082c0338f..556ced3634 100644
--- a/source/css/_common/components/sidebar/sidebar.styl
+++ b/source/css/_common/components/sidebar/sidebar.styl
@@ -2,10 +2,8 @@
   background: $black-deep;
   bottom: 0;
   box-shadow: inset 0 2px 6px black;
-  left: 0;
   position: fixed;
   top: 0;
-  width: 0;
   z-index: $zindex-4;
 
   a, span.exturl {
@@ -28,7 +26,6 @@
 .sidebar-inner {
   color: $grey-dark;
   padding: 20px 10px;
-  position: relative;
   text-align: center;
 }
 
diff --git a/source/css/_common/scaffolding/helpers.styl b/source/css/_common/scaffolding/helpers.styl
index b18f01f9cb..391701a107 100644
--- a/source/css/_common/scaffolding/helpers.styl
+++ b/source/css/_common/scaffolding/helpers.styl
@@ -73,7 +73,3 @@
   font-size: $font-size-small;
   margin-top: -20px;
 }
-
-.use-motion .motion-element {
-  opacity: 0;
-}
diff --git a/source/css/_schemes/Muse/_sidebar.styl b/source/css/_schemes/Muse/_sidebar.styl
index 7822a87f09..b80d6e2cc1 100644
--- a/source/css/_schemes/Muse/_sidebar.styl
+++ b/source/css/_schemes/Muse/_sidebar.styl
@@ -1,7 +1,10 @@
 if (hexo-config('sidebar.position') == 'right') {
   .sidebar {
-    left: auto;
-    right: 0;
+    right: 0 - $sidebar-desktop;
+
+    &.sidebar-active {
+      right: 0;
+    }
   }
 
   .sidebar-toggle, .back-to-top {
@@ -16,12 +19,17 @@ if (hexo-config('sidebar.position') == 'right') {
   .book-mark-link {
     left: $b2t-position-right;
   }
+} else {
+  .sidebar {
+    left: 0 - $sidebar-desktop;
+
+    &.sidebar-active {
+      left: 0;
+    }
+  }
 }
 
 .sidebar {
-  display: none;
-
-  &.sidebar-active {
-    display: block;
-  }
+  transition: all .4s;
+  width: $sidebar-desktop;
 }
diff --git a/source/css/_schemes/Pisces/_sidebar.styl b/source/css/_schemes/Pisces/_sidebar.styl
index 00d35aba2d..973b108c76 100644
--- a/source/css/_schemes/Pisces/_sidebar.styl
+++ b/source/css/_schemes/Pisces/_sidebar.styl
@@ -1,7 +1,3 @@
-.use-motion .sidebar .motion-element {
-  opacity: 1;
-}
-
 .sidebar {
   bottom: auto;
   right: auto;
diff --git a/source/css/_variables/Mist.styl b/source/css/_variables/Mist.styl
index 0d36b0fbb9..d8400d8f59 100644
--- a/source/css/_variables/Mist.styl
+++ b/source/css/_variables/Mist.styl
@@ -1,6 +1,8 @@
 // Variables of Mist scheme
 // =================================================
 
+@import "Muse.styl";
+
 $brand-color             = $black-deep;
 $brand-hover-color       = $brand-color;
 
diff --git a/source/css/_variables/Muse.styl b/source/css/_variables/Muse.styl
index e69de29bb2..ce30b8cbff 100644
--- a/source/css/_variables/Muse.styl
+++ b/source/css/_variables/Muse.styl
@@ -0,0 +1,5 @@
+// Variables of Muse scheme
+// =================================================
+
+$sidebar-width                = hexo-config('sidebar.width') is a 'unit' ? hexo-config('sidebar.width') : 320;
+$sidebar-desktop              = unit($sidebar-width, 'px');
diff --git a/source/css/_variables/base.styl b/source/css/_variables/base.styl
index 1deb5e3167..bc02476e3d 100644
--- a/source/css/_variables/base.styl
+++ b/source/css/_variables/base.styl
@@ -219,6 +219,7 @@ $posts-collapse-left-mobile     = 5px;
 // Sidebar
 // Variables for sidebar section elements.
 // --------------------------------------------------
+
 $sidebar-offset                       = unit(hexo-config('sidebar.offset'), px) if hexo-config('sidebar.offset') is a 'unit';
 $sidebar-nav-color                    = $black-light;
 $sidebar-nav-hover-color              = $whitesmoke;
diff --git a/source/js/next-boot.js b/source/js/next-boot.js
index b79c939f05..947f7c0ace 100644
--- a/source/js/next-boot.js
+++ b/source/js/next-boot.js
@@ -25,12 +25,9 @@ NexT.boot.registerEvents = function() {
     var item = $(event.currentTarget);
     var activeTabClassName = 'sidebar-nav-active';
     var activePanelClassName = 'sidebar-panel-active';
+    if (item.hasClass(activeTabClassName)) return;
 
     var target = $('.' + item.data('target'));
-    if (item.hasClass(activeTabClassName)) {
-      target.find('.motion-element').css({ opacity: 1 });
-      return;
-    }
     var currentTarget = target.siblings('.sidebar-panel');
     currentTarget.animate({ opacity: 0 }, TAB_ANIMATE_DURATION, () => {
       // Prevent adding TOC to Overview if Overview was selected when close & open sidebar.
diff --git a/source/js/schemes/muse.js b/source/js/schemes/muse.js
index 2b0019ae65..2540d01269 100644
--- a/source/js/schemes/muse.js
+++ b/source/js/schemes/muse.js
@@ -4,22 +4,19 @@ window.addEventListener('DOMContentLoaded', () => {
 
   var sidebarToggleLines = {
     lines: [],
-    push : function(line) {
-      this.lines.push(line);
-    },
-    init: function() {
+    init : function() {
       this.lines.forEach(line => {
-        line.init();
+        line.transform('init');
       });
     },
     arrow: function() {
       this.lines.forEach(line => {
-        line.arrow();
+        line.transform('arrow');
       });
     },
     close: function() {
       this.lines.forEach(line => {
-        line.close();
+        line.transform('close');
       });
     }
   };
@@ -34,69 +31,51 @@ window.addEventListener('DOMContentLoaded', () => {
         left     : 0
       }
     }, settings.status);
-    this.init = function() {
-      this.transform('init');
-    };
-    this.arrow = function() {
-      this.transform('arrow');
-    };
-    this.close = function() {
-      this.transform('close');
-    };
     this.transform = function(status) {
       document.querySelector(settings.el).css(this.status[status]);
     };
   }
 
-  var isRight = CONFIG.sidebar.position !== 'left';
+  var isRight = CONFIG.sidebar.position === 'right';
 
-  var sidebarToggleLine1st = new SidebarToggleLine({
+  sidebarToggleLines.lines = [new SidebarToggleLine({
     el    : '.sidebar-toggle-line-first',
     status: isRight
       ? {
         arrow: {width: '50%', transform: 'rotate(-45deg)', top: '2px'},
         close: {width: '100%', transform: 'rotate(-45deg)', top: '5px'}
-      }
-      : {
+      } : {
         arrow: {width: '50%', transform: 'rotate(45deg)', top: '2px', left: '50%'},
         close: {width: '100%', transform: 'rotate(-45deg)', top: '5px', left: '0px'}
       }
-  });
-  var sidebarToggleLine2nd = new SidebarToggleLine({
+  }), new SidebarToggleLine({
     el    : '.sidebar-toggle-line-middle',
     status: isRight
       ? {
         arrow: {width: '90%'},
         close: {opacity: 0}
-      }
-      : {
+      } : {
         arrow: {width: '90%', left: '2px'},
         close: {opacity: 0, left: '0px'}
       }
-  });
-  var sidebarToggleLine3rd = new SidebarToggleLine({
+  }), new SidebarToggleLine({
     el    : '.sidebar-toggle-line-last',
     status: isRight
       ? {
         arrow: {width: '50%', transform: 'rotate(45deg)', top: '-2px'},
         close: {width: '100%', transform: 'rotate(45deg)', top: '-5px'}
-      }
-      : {
+      } : {
         arrow: {width: '50%', transform: 'rotate(-45deg)', top: '-2px', left: '50%'},
         close: {width: '100%', transform: 'rotate(45deg)', top: '-5px', left: '0px'}
       }
-  });
-
-  sidebarToggleLines.push(sidebarToggleLine1st);
-  sidebarToggleLines.push(sidebarToggleLine2nd);
-  sidebarToggleLines.push(sidebarToggleLine3rd);
+  })];
 
-  var SIDEBAR_WIDTH = CONFIG.sidebar.width || '320px';
-  var SIDEBAR_DISPLAY_DURATION = 200;
+  var SIDEBAR_WIDTH = CONFIG.sidebar.width || 320;
+  var SIDEBAR_DISPLAY_DURATION = 400;
   var mousePos = {}; var touchPos = {};
 
   var sidebarToggleMotion = {
-    sidebarEl       : $('.sidebar'),
+    sidebarEl       : document.querySelector('.sidebar'),
     isSidebarVisible: false,
     init            : function() {
       sidebarToggleLines.init();
@@ -107,12 +86,9 @@ window.addEventListener('DOMContentLoaded', () => {
       document.querySelector('.sidebar-toggle').addEventListener('click', this.clickHandler.bind(this));
       document.querySelector('.sidebar-toggle').addEventListener('mouseenter', this.mouseEnterHandler.bind(this));
       document.querySelector('.sidebar-toggle').addEventListener('mouseleave', this.mouseLeaveHandler.bind(this));
-      this.sidebarEl
-        .on('touchstart', this.touchstartHandler.bind(this))
-        .on('touchend', this.touchendHandler.bind(this))
-        .on('touchmove', event => {
-          event.preventDefault();
-        });
+      this.sidebarEl.addEventListener('touchstart', this.touchstartHandler.bind(this));
+      this.sidebarEl.addEventListener('touchend', this.touchendHandler.bind(this));
+      this.sidebarEl.addEventListener('touchmove', event => event.preventDefault());
       window.addEventListener('sidebar:show', this.showSidebar.bind(this));
       window.addEventListener('sidebar:hide', this.hideSidebar.bind(this));
     },
@@ -155,50 +131,36 @@ window.addEventListener('DOMContentLoaded', () => {
     },
     showSidebar: function() {
       this.isSidebarVisible = true;
-      var self = this;
-
+      this.sidebarEl.classList.add('sidebar-active');
       if (typeof $.Velocity === 'function') {
-        this.sidebarEl.addClass('sidebar-active').stop().velocity({
-          width: SIDEBAR_WIDTH
-        }, {
-          duration: SIDEBAR_DISPLAY_DURATION,
-          begin   : function() {
-            $.Velocity(document.querySelectorAll('.sidebar .motion-element:not(.site-state)'), isRight ? 'transition.slideRightIn' : 'transition.slideLeftIn', {
-              stagger: 50,
-              drag   : true
-            });
-            $.Velocity(document.querySelector('.site-state'), isRight ? 'transition.slideRightIn' : 'transition.slideLeftIn', {
-              stagger: 50,
-              drag   : true,
-              display: 'flex'
-            });
-          },
-          complete: function() {
-            NexT.utils.initSidebarDimension();
-          }
+        $.Velocity(document.querySelectorAll('.sidebar .motion-element:not(.site-state)'), isRight ? 'transition.slideRightIn' : 'transition.slideLeftIn', {
+          stagger: 50,
+          drag   : true
         });
-      } else {
-        this.sidebarEl.addClass('sidebar-active').stop().animate({
-          width: SIDEBAR_WIDTH
-        }, SIDEBAR_DISPLAY_DURATION, () => {
-          self.sidebarEl.find('.motion-element').css({opacity: 1});
-          NexT.utils.initSidebarDimension();
+        $.Velocity(document.querySelector('.site-state'), isRight ? 'transition.slideRightIn' : 'transition.slideLeftIn', {
+          stagger: 50,
+          drag   : true,
+          display: 'flex'
         });
       }
 
       sidebarToggleLines.close();
-      NexT.utils.isDesktop() && $('body').stop().animate(isRight ? {'padding-right': SIDEBAR_WIDTH} : {'padding-left': SIDEBAR_WIDTH}, SIDEBAR_DISPLAY_DURATION);
+      NexT.utils.isDesktop() && $('body').stop().animate(isRight ? {
+        'padding-right': SIDEBAR_WIDTH
+      } : {
+        'padding-left': SIDEBAR_WIDTH
+      }, SIDEBAR_DISPLAY_DURATION);
     },
     hideSidebar: function() {
-      var self = this;
       this.isSidebarVisible = false;
-      this.sidebarEl.find('.motion-element').css({opacity: 0});
-      this.sidebarEl.stop().animate({width: 0}, SIDEBAR_DISPLAY_DURATION, () => {
-        self.sidebarEl.removeClass('sidebar-active');
-      });
+      this.sidebarEl.classList.remove('sidebar-active');
 
       sidebarToggleLines.init();
-      NexT.utils.isDesktop() && $('body').stop().animate(isRight ? {'padding-right': 0} : {'padding-left': 0}, SIDEBAR_DISPLAY_DURATION);
+      NexT.utils.isDesktop() && $('body').stop().animate(isRight ? {
+        'padding-right': 0
+      } : {
+        'padding-left': 0
+      }, SIDEBAR_DISPLAY_DURATION);
     }
   };
   sidebarToggleMotion.init();
diff --git a/source/js/utils.js b/source/js/utils.js
index 5025199277..4917cacb0b 100644
--- a/source/js/utils.js
+++ b/source/js/utils.js
@@ -250,8 +250,8 @@ NexT.utils = {
       sidebarNav.style.display = 'none';
       sidebarNav.classList.remove('motion-element');
       document.querySelector('.sidebar-nav-overview').click();
-      return;
     }
+    NexT.utils.initSidebarDimension();
 
     const navItems = document.querySelectorAll('.post-toc li');
     const sections = [...navItems].map(element => {
@@ -375,10 +375,7 @@ NexT.utils = {
   },
 
   updateSidebarPosition: function() {
-    if (!this.isDesktop() || this.isPisces() || this.isGemini()) {
-      this.initSidebarDimension();
-      return;
-    }
+    if (!this.isDesktop() || this.isPisces() || this.isGemini()) return;
     // Expand sidebar on post detail page by default, when post has a toc.
     var $tocContent = $('.post-toc');
     var display = CONFIG.page.sidebar;