diff --git a/js/ui/workspaceThumbnail.js b/js/ui/workspaceThumbnail.js
index 3b9cf03e0..381c12c4f 100644
--- a/js/ui/workspaceThumbnail.js
+++ b/js/ui/workspaceThumbnail.js
@@ -547,6 +547,11 @@ const ThumbnailsBox = new Lang.Class({
         this.actor.connect('scroll-event',
                            Lang.bind(this, this._onScrollEvent));
 
+        Main.overview.connect('showing',
+                              Lang.bind(this, this._createThumbnails));
+        Main.overview.connect('hidden',
+                              Lang.bind(this, this._destroyThumbnails));
+
         Main.overview.connect('item-drag-begin',
                               Lang.bind(this, this._onDragBegin));
         Main.overview.connect('item-drag-end',
@@ -734,7 +739,7 @@ const ThumbnailsBox = new Lang.Class({
         }
     },
 
-    show: function() {
+    _createThumbnails: function() {
         this._switchWorkspaceNotifyId =
             global.window_manager.connect('switch-workspace',
                                           Lang.bind(this, this._activeWorkspaceChanged));
@@ -763,10 +768,15 @@ const ThumbnailsBox = new Lang.Class({
 
         this.addThumbnails(0, global.screen.n_workspaces);
 
+        // reset any translation and make sure the actor is visible when
+        // entering the overview
+        this.slideX = 0;
+        this.actor.show();
+
         this._updateSwitcherVisibility();
     },
 
-    hide: function() {
+    _destroyThumbnails: function() {
         if (this._switchWorkspaceNotifyId > 0) {
             global.window_manager.disconnect(this._switchWorkspaceNotifyId);
             this._switchWorkspaceNotifyId = 0;
@@ -781,6 +791,52 @@ const ThumbnailsBox = new Lang.Class({
         this._thumbnails = [];
     },
 
+    _computeTranslation: function() {
+        let rtl = (this.actor.get_text_direction() == Clutter.TextDirection.RTL);
+
+        if (rtl)
+            return - this.actor.width;
+        else
+            return this.actor.width;
+    },
+
+    get slideX() {
+        return this._slideX;
+    },
+
+    set slideX(value) {
+        this._slideX = value;
+        this.actor.translation_x = this._slideX;
+
+        if (this._slideX > 0) {
+            let rect = new Clutter.Rect();
+            rect.size.width = this._background.width - this._slideX;
+            rect.size.height = this._background.height;
+            this.actor.clip_rect = rect;
+        } else {
+            this.actor.clip_rect = null;
+        }
+    },
+
+    show: function() {
+        this.actor.show();
+        Tweener.addTween(this, { slideX: 0,
+                                 transition: 'easeOutQuad',
+                                 time: SLIDE_ANIMATION_TIME
+                               });
+    },
+
+    hide: function() {
+        let hiddenX = this._computeTranslation();
+        Tweener.addTween(this, { slideX: hiddenX,
+                                 transition: 'easeOutQuad',
+                                 time: SLIDE_ANIMATION_TIME,
+                                 onComplete: Lang.bind(this, function () {
+                                     this.actor.hide();
+                                 })
+                               });
+    },
+
     _workspacesChanged: function() {
         let oldNumWorkspaces = this._thumbnails.length;
         let newNumWorkspaces = global.screen.n_workspaces;