diff --git a/frontend/src/components/side-panel.js b/frontend/src/components/side-panel.js
index 69bb9d91fb..774af14c00 100644
--- a/frontend/src/components/side-panel.js
+++ b/frontend/src/components/side-panel.js
@@ -22,10 +22,10 @@ const propTypes = {
 class SidePanel extends React.Component {
 
   render() {
-    const { children, isSidePanelFolded, style, eventBus } = this.props;
+    const { children, isSidePanelFolded, style, eventBus, isSidePanelClosed } = this.props;
     return (
       <div
-        className={classnames('side-panel', { 'side-panel-folded': isSidePanelFolded, 'left-zero': !this.props.isSidePanelClosed })}
+        className={classnames('side-panel', { 'side-panel-folded': isSidePanelFolded, 'left-zero': !isSidePanelClosed })}
         style={isSidePanelFolded ? { flexBasis: SIDE_PANEL_FOLDED_WIDTH } : style}
       >
         <MediaQuery query="(max-width: 767.8px)">
diff --git a/frontend/src/css/layout.css b/frontend/src/css/layout.css
index 9515ec9073..21b52cb4fa 100644
--- a/frontend/src/css/layout.css
+++ b/frontend/src/css/layout.css
@@ -19,6 +19,9 @@
   flex-direction: column;
   overflow: hidden;
   background: #fff;
+  transition: flex 0.3s ease-in-out;
+  -webkit-transition: flex 0.3s ease-in-out;
+  -moz-transition: flex 0.3s ease-in-out;
 }
 
 .user-panel .side-panel-north {
@@ -44,9 +47,12 @@
     width: 300px;
     max-width: calc(100% - 40px);
     height:100%;
-    -webkit-transition: all 0.3s ease;
-    -moz-transition: all 0.3s ease;
-    transition: all 0.3s ease;
+    -webkit-transition: left 0.3s ease, width 0.3s ease;
+    -moz-transition: left 0.3s ease, width 0.3s ease;
+    transition: left 0.3s ease, width 0.3s ease;
+  }
+  .side-panel.left-zero {
+    left: 0;
   }
 }