--- a/devtools/client/inspector/animation/animation.js
+++ b/devtools/client/inspector/animation/animation.js
@@ -17,17 +17,16 @@ const {
   updateAnimations,
   updateDetailVisibility,
   updateElementPickerEnabled,
   updateHighlightedNode,
   updateSelectedAnimation,
   updateSidebarSize
 } = require("./actions/animations");
 const {
-  isAllAnimationEqual,
   hasAnimationIterationCountInfinite,
   hasRunningAnimation,
 } = require("./utils/utils");
 
 class AnimationInspector {
   constructor(inspector, win) {
     this.inspector = inspector;
     this.win = win;
@@ -96,16 +95,17 @@ class AnimationInspector {
       setSelectedNode,
       simulateAnimation,
       simulateAnimationForKeyframesProgressBar,
       toggleElementPicker,
     } = this;
 
     const target = this.inspector.target;
     this.animationsFront = new AnimationsFront(target.client, target.form);
+    this.animationsFront.setWalkerActor(this.inspector.walker);
 
     this.animationsCurrentTimeListeners = [];
     this.isCurrentTimeSet = false;
 
     const provider = createElement(Provider,
       {
         id: "newanimationinspector",
         key: "newanimationinspector",
@@ -567,26 +567,22 @@ class AnimationInspector {
   toggleElementPicker() {
     this.inspector.toolbox.highlighterUtils.togglePicker();
   }
 
   async update() {
     const done = this.inspector.updating("newanimationinspector");
 
     const selection = this.inspector.selection;
-    const nextAnimations =
+    const animations =
       selection.isConnected() && selection.isElementNode()
       ? await this.animationsFront.getAnimationPlayersForNode(selection.nodeFront)
       : [];
-    const currentAnimations = this.state.animations;
-
-    if (!currentAnimations || !isAllAnimationEqual(currentAnimations, nextAnimations)) {
-      this.updateState(nextAnimations);
-      this.setAnimationStateChangedListenerEnabled(true);
-    }
+    this.updateState(animations);
+    this.setAnimationStateChangedListenerEnabled(true);
 
     done();
   }
 
   updateAnimations(animations) {
     if (!animations.length) {
       return Promise.resolve();
     }

--- a/devtools/client/inspector/animation/test/head.js
+++ b/devtools/client/inspector/animation/test/head.js
@@ -539,17 +539,25 @@ const waitForAnimationDetail = async fun
 
 /**
  * Wait for all AnimationTarget components to be fully loaded
  * (fetched their related actor and rendered).
  *
  * @param {AnimationInspector} animationInspector
  */
 const waitForAllAnimationTargets = async function(animationInspector) {
-  for (let i = 0; i < animationInspector.state.animations.length; i++) {
+  const panel =
+    animationInspector.inspector.panelWin.document.getElementById("animation-container");
+  const objectBoxCount = panel.querySelectorAll(".animation-target .objectBox").length;
+
+  if (objectBoxCount === animationInspector.state.animations.length) {
+    return;
+  }
+
+  for (let i = 0; i < animationInspector.state.animations.length - objectBoxCount; i++) {
     await animationInspector.once("animation-target-rendered");
   }
 };
 
 /**
  * Wait for all SummaryGraph components to be fully loaded
  *
  * @param {AnimationInspector} inspector

--- a/devtools/client/inspector/animation/utils/utils.js
+++ b/devtools/client/inspector/animation/utils/utils.js
@@ -40,41 +40,16 @@ function findOptimalTimeInterval(minTime
       return interval;
     }
 
     multiplier *= 10;
   }
 }
 
 /**
- * Check the equality of the given animations.
- *
- * @param {Array} animations.
- * @param {Array} same to above.
- * @return {Boolean} true: same animations
- */
-function isAllAnimationEqual(animationsA, animationsB) {
-  if (animationsA.length !== animationsB.length) {
-    return false;
-  }
-
-  for (let i = 0; i < animationsA.length; i++) {
-    const animationA = animationsA[i];
-    const animationB = animationsB[i];
-
-    if (animationA.actorID !== animationB.actorID ||
-        !isTimingEffectEqual(animationsA[i].state, animationsB[i].state)) {
-      return false;
-    }
-  }
-
-  return true;
-}
-
-/**
  * Check whether or not the given list of animations has an iteration count of infinite.
  *
  * @param {Array} animations.
  * @return {Boolean} true if there is an animation in the  list of animations
  *                   whose animation iteration count is infinite.
  */
 function hasAnimationIterationCountInfinite(animations) {
   return animations.some(({state}) => !state.iterationCount);
@@ -85,31 +60,11 @@ function hasAnimationIterationCountInfin
  *
  * @param {Array} animations.
  * @return {Boolean} true: running
  */
 function hasRunningAnimation(animations) {
   return animations.some(({state}) => state.playState === "running");
 }
 
-/**
- * Check the equality given states as effect timing.
- *
- * @param {Object} state of animation.
- * @param {Object} same to avobe.
- * @return {Boolean} true: same effect timing
- */
-function isTimingEffectEqual(stateA, stateB) {
-  return stateA.delay === stateB.delay &&
-         stateA.direction === stateB.direction &&
-         stateA.duration === stateB.duration &&
-         stateA.easing === stateB.easing &&
-         stateA.endDelay === stateB.endDelay &&
-         stateA.fill === stateB.fill &&
-         stateA.iterationCount === stateB.iterationCount &&
-         stateA.iterationStart === stateB.iterationStart;
-}
-
 exports.findOptimalTimeInterval = findOptimalTimeInterval;
 exports.hasAnimationIterationCountInfinite = hasAnimationIterationCountInfinite;
 exports.hasRunningAnimation = hasRunningAnimation;
-exports.isAllAnimationEqual = isAllAnimationEqual;
-exports.isTimingEffectEqual = isTimingEffectEqual;