--- a/devtools/client/inspector/inspector.js
+++ b/devtools/client/inspector/inspector.js
@@ -700,21 +700,45 @@ Inspector.prototype = {
 
             return this.eventsview.provider;
           }
         },
         defaultTab == eventsId);
     }
 
     if (this.target.form.animationsActor) {
-      this.sidebar.addFrameTab(
-        "animationinspector",
-        INSPECTOR_L10N.getStr("inspector.sidebar.animationInspectorTitle"),
-        "chrome://devtools/content/animationinspector/animation-inspector.xhtml",
-        defaultTab == "animationinspector");
+      const animationTitle =
+        INSPECTOR_L10N.getStr("inspector.sidebar.animationInspectorTitle");
+
+      if (Services.prefs.getBoolPref("devtools.new-animationinspector.enabled")) {
+        const animationId = "newanimationinspector";
+
+        this.sidebar.addTab(
+          animationId,
+          animationTitle,
+          {
+            props: {
+              id: animationId,
+              title: animationTitle
+            },
+            panel: () => {
+              const AnimationInspector =
+                this.browserRequire("devtools/client/inspector/animation/animation");
+              this.animationinspector = new AnimationInspector();
+              return this.animationinspector.provider;
+            }
+          },
+          defaultTab == animationId);
+      } else {
+        this.sidebar.addFrameTab(
+          "animationinspector",
+          animationTitle,
+          "chrome://devtools/content/animationinspector/animation-inspector.xhtml",
+          defaultTab == "animationinspector");
+      }
     }
 
     if (this.canGetUsedFontFaces) {
       // Inject a lazy loaded react tab by exposing a fake React object
       // with a lazy defined Tab thanks to `panel` being a function
       let fontId = "fontinspector";
       let fontTitle = INSPECTOR_L10N.getStr("inspector.sidebar.fontInspectorTitle");
       this.sidebar.addTab(

--- a/devtools/client/preferences/devtools.js
+++ b/devtools/client/preferences/devtools.js
@@ -62,16 +62,19 @@ pref("devtools.inspector.colorWidget.ena
 pref("devtools.inspector.shapesHighlighter.enabled", true);
 // Enable the Changes View
 pref("devtools.changesview.enabled", false);
 // Enable the Events View
 pref("devtools.eventsview.enabled", false);
 // Enable the Flexbox Inspector
 pref("devtools.flexboxinspector.enabled", false);
 
+// Enable the new Animation Inspector
+pref("devtools.new-animationinspector.enabled", false);
+
 // Grid highlighter preferences
 pref("devtools.gridinspector.gridOutlineMaxColumns", 50);
 pref("devtools.gridinspector.gridOutlineMaxRows", 50);
 pref("devtools.gridinspector.showGridAreas", false);
 pref("devtools.gridinspector.showGridLineNumbers", false);
 pref("devtools.gridinspector.showInfiniteLines", false);
 pref("devtools.gridinspector.showNegativeLineNumbers", false);