diff --git a/src/atlasViewer/atlasViewer.component.ts b/src/atlasViewer/atlasViewer.component.ts
index eeeba6a9cbb9b7d07a5e5e89b8aa20524f0d0a38..1b3f2ecd0c1556567ed3e6d45463783365506277 100644
--- a/src/atlasViewer/atlasViewer.component.ts
+++ b/src/atlasViewer/atlasViewer.component.ts
@@ -419,7 +419,7 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
     }
 
     const colorBufferFloat = gl.getExtension('EXT_color_buffer_float')
-
+    
     if (!colorBufferFloat) {
 
       const detail = `Your browser does not support 
@@ -449,22 +449,10 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
       }) as NgLayerInterface)
   }
 
-  rafId : number | null
+  panelAnimationEnd(){
 
-  panelAnimationFlag(flag:boolean){
-    const redraw = ()=>{
-      if( this.nehubaContainer && this.nehubaContainer.nehubaViewer && this.nehubaContainer.nehubaViewer.nehubaViewer )
-        this.nehubaContainer.nehubaViewer.nehubaViewer.redraw()
-      this.rafId = requestAnimationFrame(()=>redraw())
-    }
-    if( flag ){
-      if(this.rafId)
-        cancelAnimationFrame(this.rafId)
-      this.rafId = requestAnimationFrame(()=>redraw())
-    }else{
-      cancelAnimationFrame(this.rafId)
-      this.rafId = null
-    }
+    if( this.nehubaContainer && this.nehubaContainer.nehubaViewer && this.nehubaContainer.nehubaViewer.nehubaViewer )
+      this.nehubaContainer.nehubaViewer.nehubaViewer.redraw()
   }
 
   toggleSidePanel(panelName:string){
diff --git a/src/atlasViewer/atlasViewer.template.html b/src/atlasViewer/atlasViewer.template.html
index 92b5f4e9d90f576110d9c0e362bf2f0878ee64d1..dc38728822d8207aed081e7a8d8f5e1525d0f15e 100644
--- a/src/atlasViewer/atlasViewer.template.html
+++ b/src/atlasViewer/atlasViewer.template.html
@@ -2,8 +2,8 @@
 
   <layout-mainside
     [showSide] = "false"
-    [overlay] = "false"
-    (panelAnimationFlag) = "panelAnimationFlag($event)">
+    [animationFlag] = "false"
+    (panelAnimationEnd) = "panelAnimationEnd($event)">
     <div maincontent>
       <ui-nehuba-container>
       </ui-nehuba-container>
diff --git a/src/layouts/layoutsExample/layoutsExample.template.html b/src/layouts/layoutsExample/layoutsExample.template.html
index bb3f26847e5f48a5a6fab3ea672c3540d624ebb0..479867efe8514eb385edd2d1d46e5420d6d31d76 100644
--- a/src/layouts/layoutsExample/layoutsExample.template.html
+++ b/src/layouts/layoutsExample/layoutsExample.template.html
@@ -17,7 +17,6 @@
     <div class = "col-md-4">
       <div class = "well">
         <layout-mainside
-          [overlay] = "mainsideOverlay"
           [sideWidth] = "mainsideSideWidth"
           [showSide] = "mainsideShowSide">
 
diff --git a/src/layouts/mainside/mainside.animation.ts b/src/layouts/mainside/mainside.animation.ts
index e3a93afc431c6370d04406a2fe23c82283097727..1cf8e4a3fd8b7a3ca3ef44541f3b96bce3bbb029 100644
--- a/src/layouts/mainside/mainside.animation.ts
+++ b/src/layouts/mainside/mainside.animation.ts
@@ -7,19 +7,19 @@ export const mainSideAnimation = trigger('collapseSide',[
       'flex-basis' : '0px',
       'width' : '0px'
     }),
-    { params : { sideWidth : 0 } }
+    { params : { sideWidth : 0, animationTiming: 180 } }
   ),
   state('visible',
     style({
       'flex-basis' : '{{ sideWidth }}px',
       'width' : '{{ sideWidth }}px'
     }),
-    { params : { sideWidth : 300 } }
+    { params : { sideWidth : 300, animationTiming: 180 } }
   ),
   transition('collapsed => visible',[
-    animate('180ms ease-out')
+    animate('{{ animationTiming }}ms ease-out')
   ]),
   transition('visible => collapsed',[
-    animate('180ms ease-in')
+    animate('{{ animationTiming }}ms ease-in')
   ])
 ])
\ No newline at end of file
diff --git a/src/layouts/mainside/mainside.component.ts b/src/layouts/mainside/mainside.component.ts
index 83eeaf357d830482605675fabe485d72aecfe07f..56824fbe8c371b095ea7b7c266571a3731383088 100644
--- a/src/layouts/mainside/mainside.component.ts
+++ b/src/layouts/mainside/mainside.component.ts
@@ -14,12 +14,13 @@ import { mainSideAnimation } from "./mainside.animation";
 
 export class LayoutMainSide{
   @Input() showResizeSliver : boolean = true
-  @Input() overlay : boolean = false
   @Input() showSide : boolean = false
   @Input() sideWidth : number = 300
+  @Input() animationFlag : boolean = false
 
   @Output() panelShowStateChanged : EventEmitter<boolean> = new EventEmitter()
-  @Output() panelAnimationFlag : EventEmitter<boolean> = new EventEmitter()
+  @Output() panelAnimationStart : EventEmitter<boolean> = new EventEmitter()
+  @Output() panelAnimationEnd : EventEmitter<boolean> = new EventEmitter()
 
   togglePanelShow(){
     this.showSide = !this.showSide
@@ -27,10 +28,10 @@ export class LayoutMainSide{
   }
 
   animationStart(){
-    this.panelAnimationFlag.emit(true)
+    this.panelAnimationStart.emit(true)
   }
 
   animationEnd(){
-    this.panelAnimationFlag.emit(false)
+    this.panelAnimationEnd.emit(true)
   }
 }
\ No newline at end of file
diff --git a/src/layouts/mainside/mainside.template.html b/src/layouts/mainside/mainside.template.html
index e06cf141067d1477fd5aeac8d2c7c764ff936917..b3da941e85cef8d68e30158d968274e7126dc312 100644
--- a/src/layouts/mainside/mainside.template.html
+++ b/src/layouts/mainside/mainside.template.html
@@ -8,7 +8,7 @@
     </ng-content>
   </div>
   <div 
-    [@collapseSide] = "{ value : showSide ? 'visible' : 'collapsed' , params : { sideWidth : sideWidth } }"
+    [@collapseSide] = "{ value : showSide ? 'visible' : 'collapsed' , params : { sideWidth : sideWidth, animationTiming : animationFlag ? 180 : 0 } }"
     (@collapseSide.start) = "animationStart()"
     (@collapseSide.done) = "animationEnd()"
     sidecontent>