--- a/devtools/client/animationinspector/animation-controller.js
+++ b/devtools/client/animationinspector/animation-controller.js
@@ -223,21 +223,24 @@ var AnimationsController = {
 
   onPanelVisibilityChange: Task.async(function* () {
     if (this.isPanelVisible()) {
       this.onNewNodeFront();
     }
   }),
 
   onNewNodeFront: Task.async(function* () {
-    // Ignore if the panel isn't visible or the node selection hasn't changed.
-    if (!this.isPanelVisible() ||
-        this.nodeFront === gInspector.selection.nodeFront) {
+    // Ignore if the panel isn't visible.
+    // Or the node selection hasn't changed and no animation mutations event occurs during
+    // hidden.
+    if (!this.isPanelVisible() || (this.nodeFront === gInspector.selection.nodeFront &&
+                                   !this.mutationsDetectedWhileHidden)) {
       return;
     }
+    this.isMutationsEventOccuredDuringHidden = false;
 
     this.nodeFront = gInspector.selection.nodeFront;
     let done = gInspector.updating("animationscontroller");
 
     if (!gInspector.selection.isConnected() ||
         !gInspector.selection.isElementNode()) {
       this.destroyAnimationPlayers();
       this.emit(this.PLAYERS_UPDATED_EVENT);
@@ -356,18 +359,24 @@ var AnimationsController = {
       }
 
       if (type === "removed") {
         let index = this.animationPlayers.indexOf(player);
         this.animationPlayers.splice(index, 1);
       }
     }
 
-    // Let the UI know the list has been updated.
-    this.emit(this.PLAYERS_UPDATED_EVENT, this.animationPlayers);
+    if (this.isPanelVisible()) {
+      // Let the UI know the list has been updated.
+      this.emit(this.PLAYERS_UPDATED_EVENT, this.animationPlayers);
+    } else {
+      // Avoid updating the UI while the panel is hidden.
+      // This avoids unnecessary work.
+      this.mutationsDetectedWhileHidden = true;
+    }
   },
 
   /**
    * Get the latest known current time of document.timeline.
    * This value is sent along with all AnimationPlayerActors' states, but it
    * isn't updated after that, so this function loops over all know animations
    * to find the highest value.
    * @return {Number|Boolean} False is returned if this server version doesn't