diff --git a/js/ui/messageTray.js b/js/ui/messageTray.js
index 7347183dd..30b90e545 100644
--- a/js/ui/messageTray.js
+++ b/js/ui/messageTray.js
@@ -422,6 +422,66 @@ const NotificationApplicationPolicy = new Lang.Class({
     }
 });
 
+const RevealerLayout = new Lang.Class({
+    Name: 'RevealerLayout',
+    Extends: Clutter.BinLayout,
+
+    _init: function() {
+        this.parent();
+
+        this._heightScale = 0;
+    },
+
+    vfunc_get_preferred_height: function(container, forWidth) {
+        let [minHeight, natHeight] = this.parent(container, forWidth);
+        minHeight *= this._heightScale;
+        natHeight *= this._heightScale;
+        return [minHeight, natHeight];
+    },
+
+    set heightScale(value) {
+        if (this._heightScale == value)
+            return;
+
+        this._heightScale = value;
+        this.layout_changed();
+    },
+
+    get heightScale() {
+        return this._heightScale;
+    },
+});
+
+const Revealer = new Lang.Class({
+    Name: 'Revealer',
+
+    _init: function(child) {
+        this._layout = new RevealerLayout();
+        this.actor = new St.Widget({ layout_manager: this._layout });
+        this.actor.add_child(child);
+
+        this._visible = false;
+    },
+
+    _setTo: function(heightScale, animate) {
+        Tweener.removeTweens(this._layout);
+        if (animate)
+            Tweener.addTween(this._layout, { heightScale: heightScale,
+                                             time: ANIMATION_TIME,
+                                             transition: 'easeOutQuad' });
+        else
+            this._layout.heightScale = heightScale;
+    },
+
+    show: function(animate) {
+        this._setTo(1, animate);
+    },
+
+    hide: function(animate) {
+        this._setTo(0, animate);
+    },
+});
+
 // Notification:
 // @source: the notification's Source
 // @title: the title
@@ -1468,6 +1528,8 @@ const MessageTray = new Lang.Class({
                                                    y_expand: true,
                                                    x_expand: true,
                                                    layout_manager: new Clutter.BinLayout() });
+        this._notificationRevealer = new Revealer(this._notificationWidget);
+
         this._notificationWidget.connect('key-release-event', Lang.bind(this, this._onNotificationKeyRelease));
         this._notificationWidget.connect('notify::hover', Lang.bind(this, this._onNotificationHoverChanged));
         this._notificationWidget.connect('notify::height', Lang.bind(this, function() {
@@ -1572,7 +1634,7 @@ const MessageTray = new Lang.Class({
                                                         }));
 
         Main.layoutManager.trayBox.add_actor(this.actor);
-        Main.layoutManager.trayBox.add_actor(this._notificationWidget);
+        Main.layoutManager.trayBox.add_actor(this._notificationRevealer.actor);
         Main.layoutManager.trackChrome(this.actor);
         Main.layoutManager.trackChrome(this._notificationWidget);
         Main.layoutManager.trackChrome(this._closeButton);
@@ -2344,6 +2406,7 @@ const MessageTray = new Lang.Class({
                       onComplete: this._showNotificationCompleted,
                       onCompleteScope: this
                     });
+        this._notificationRevealer.show(true);
    },
 
     _showNotificationCompleted: function() {
@@ -2414,11 +2477,13 @@ const MessageTray = new Lang.Class({
                           onComplete: this._hideNotificationCompleted,
                           onCompleteScope: this
                         });
+            this._notificationRevealer.hide(true);
         } else {
             Tweener.removeTweens(this._notificationWidget);
             this._notificationWidget.opacity = 0;
             this._notificationState = State.HIDDEN;
             this._hideNotificationCompleted();
+            this._notificationRevealer.hide(false);
         }
     },