diff --git a/config/ags/js/bar/systray.js b/config/ags/js/bar/systray.js
index 65423d16..b540d68d 100644
--- a/config/ags/js/bar/systray.js
+++ b/config/ags/js/bar/systray.js
@@ -8,12 +8,15 @@ import { Separator } from '../misc/separator.js';
 
 const SysTrayItem = item => MenuItem({
   className: 'tray-item',
-  child: Icon({
-    size: 24,
+  child: Revealer({
+    transition: 'slide_right',
+    child: Icon({
+      size: 24,
+    }),
   }),
   submenu: item.menu,
   connections: [[item, btn => {
-    btn.child.icon = item.icon;
+    btn.child.child.icon = item.icon;
     btn.tooltipMarkup = item.tooltipMarkup;
   }]]
 });
@@ -39,13 +42,18 @@ export const SysTray = Revealer({
             box._items.set(id, widget);
             box.add(widget);
             box.show_all();
+            widget.child.revealChild = true;
           }],
+
           ['onRemoved', (box, id) => {
             if (!box._items.has(id))
               return;
 
-            box._items.get(id).destroy();
-            box._items.delete(id);
+            box._items.get(id).child.revealChild = false;
+            setTimeout(() => {
+              box._items.get(id).destroy();
+              box._items.delete(id);
+            }, 400);
           }],
         ],
         connections: [