diff --git a/core/src/utils/animation/animation.ts b/core/src/utils/animation/animation.ts
index f7dd825439..6801e04496 100644
--- a/core/src/utils/animation/animation.ts
+++ b/core/src/utils/animation/animation.ts
@@ -38,7 +38,7 @@ export const createAnimation = () => {
   let ani: Animation;
 
   /**
-   * Destroy this animation and all child animations.
+   * Destroy the animation and all child animations.
    */
   const destroy = () => {
     cleanUp();
diff --git a/core/src/utils/animation/test/animationbuilder/e2e.ts b/core/src/utils/animation/test/animationbuilder/e2e.ts
new file mode 100644
index 0000000000..ffdde09f65
--- /dev/null
+++ b/core/src/utils/animation/test/animationbuilder/e2e.ts
@@ -0,0 +1,25 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+const navChanged = () => new Promise(resolve => window.addEventListener('ionRouteDidChange', resolve));
+
+test('animation:backwards-compatibility animationbuilder', async () => {
+  const page = await newE2EPage({ url: '/src/utils/animation/test/animationbuilder?ionic:_testing=true' });
+  const screenshotCompares = [];
+
+  screenshotCompares.push(await page.compareScreenshot());
+
+  page.click('page-root ion-button.next');
+  await page.waitFor(navChanged);
+  page.click('page-one ion-button.next');
+  await page.waitFor(navChanged);
+  page.click('page-two ion-button.next');
+  await page.waitFor(navChanged);
+  page.click('page-three ion-back-button');
+  await page.waitFor(navChanged);
+  page.click('page-two ion-back-button');
+  await page.waitFor(navChanged);
+  page.click('page-one ion-back-button');
+  await page.waitFor(navChanged);
+
+  screenshotCompares.push(await page.compareScreenshot());
+});
diff --git a/core/src/utils/animation/test/animationbuilder/index.html b/core/src/utils/animation/test/animationbuilder/index.html
new file mode 100644
index 0000000000..2898bbd40c
--- /dev/null
+++ b/core/src/utils/animation/test/animationbuilder/index.html
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Animation - Animation Builder</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
+  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
+  <script src="../../../../../scripts/testing/scripts.js"></script>
+  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>  <script>
+    class PageRoot extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>Root</ion-title>
+            </ion-toolbar>
+          </ion-header>
+          <ion-content class="ion-padding">
+            <h1>Root</h1>
+            <div>
+              <ion-nav-push component="page-one">
+                <ion-button class="next">Go to Page One</ion-button>
+              </ion-nav-push>
+            </div>
+          </ion-content>
+        `;
+      }
+    }
+    class PageOne extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+          <ion-header>
+            <ion-toolbar>
+              <ion-buttons slot="start">
+                <ion-back-button></ion-back-button>
+              </ion-buttons>
+              <ion-title>Page One</ion-title>
+            </ion-toolbar>
+          </ion-header>
+          <ion-content class="ion-padding">
+            <h1>Page One</h1>
+            <ion-nav-push component="page-two">
+              <ion-button class="next">Go to Page Two</ion-button>
+            </ion-nav-push>
+          </ion-content>
+        `;
+      }
+    }
+    class PageTwo extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+          <ion-header>
+            <ion-toolbar>
+              <ion-buttons slot="start">
+                <ion-back-button></ion-back-button>
+              </ion-buttons>
+              <ion-title>Page Two</ion-title>
+            </ion-toolbar>
+          </ion-header>
+          <ion-content class="ion-padding">
+            <h1>Page Two</h1>
+            <div>
+              <ion-nav-push component="page-three">
+                <ion-button class="next">Go to Page Three</ion-button>
+              </ion-nav-push>
+            </div>
+          </ion-content>
+        `;
+      }
+    }
+    class PageThree extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+          <ion-header>
+            <ion-toolbar>
+              <ion-buttons slot="start">
+                <ion-back-button></ion-back-button>
+              </ion-buttons>
+              <ion-title>Page Three</ion-title>
+            </ion-toolbar>
+          </ion-header>
+          <ion-content class="ion-padding">
+            <h1>Page Three</h1>
+          </ion-content>
+        `;
+      }
+    }
+    customElements.define('page-root', PageRoot);
+    customElements.define('page-one', PageOne);
+    customElements.define('page-two', PageTwo);
+    customElements.define('page-three', PageThree);
+    
+    
+    window.Ionic.config.navAnimation = (AnimationC, navEl, opts) => {
+      const TRANSLATEY = 'translateY';
+      const OFF_BOTTOM = '40px';
+      const CENTER = '0px';
+    
+      const backDirection = (opts.direction === 'back');
+      const enteringEl = opts.enteringEl;
+      const leavingEl = opts.leavingEl;
+      const ionPageElement = getIonPageElement(enteringEl);
+      const enteringToolbarEle = ionPageElement.querySelector('ion-toolbar');
+      const rootTransition = new AnimationC();
+    
+      rootTransition
+        .addElement(ionPageElement)
+        .beforeRemoveClass('ion-page-invisible');
+    
+      // animate the component itself
+      if (backDirection) {
+        rootTransition
+          .duration(opts.duration || 200)
+          .easing('cubic-bezier(0.47,0,0.745,0.715)');
+    
+      } else {
+        rootTransition
+          .duration(opts.duration || 280)
+          .easing('cubic-bezier(0.36,0.66,0.04,1)')
+          .fromTo(TRANSLATEY, OFF_BOTTOM, CENTER, true)
+          .fromTo('opacity', 0.01, 1, true);
+      }
+    
+      // Animate toolbar if it's there
+      if (enteringToolbarEle) {
+        const enteringToolBar = new AnimationC();
+        enteringToolBar.addElement(enteringToolbarEle);
+        rootTransition.add(enteringToolBar);
+      }
+    
+      // setup leaving view
+      if (leavingEl && backDirection) {
+        // leaving content
+        rootTransition
+          .duration(opts.duration || 200)
+          .easing('cubic-bezier(0.47,0,0.745,0.715)');
+    
+        const leavingPage = new AnimationC();
+        leavingPage
+          .addElement(getIonPageElement(leavingEl))
+          .fromTo(TRANSLATEY, CENTER, OFF_BOTTOM)
+          .fromTo('opacity', 1, 0);
+    
+        rootTransition.add(leavingPage);
+      }
+    
+      return Promise.resolve(rootTransition);
+    };
+    const getIonPageElement = (element) => {
+      if (element.classList.contains('ion-page')) {
+        return element;
+      }
+    
+      const ionPage = element.querySelector(':scope > .ion-page, :scope > ion-nav, :scope > ion-tabs');
+      if (ionPage) {
+        return ionPage;
+      }
+      // idk, return the original element so at least something animates and we don't have a null pointer
+      return element;
+    };
+  </script>
+</head>
+
+<body>
+  <ion-app>
+    <ion-router>
+      <ion-route url="/" component="page-root"></ion-route>
+      <ion-route url="/page-one" component="page-one"></ion-route>
+      <ion-route url="/page-two" component="page-two"></ion-route>
+      <ion-route url="/page-three" component="page-three"></ion-route>
+    </ion-router>
+    <ion-nav></ion-nav>
+  </ion-app>
+</body>
+
+</html>
