diff --git a/core/src/utils/animation/test/grid/index.html b/core/src/utils/animation/test/grid/index.html
deleted file mode 100644
index 589df16800..0000000000
--- a/core/src/utils/animation/test/grid/index.html
+++ /dev/null
@@ -1,110 +0,0 @@
-<!DOCTYPE html>
-<html dir="ltr">
-
-<head>
-  <meta charset="UTF-8">
-  <title>Animation - Grid</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 type="module">
-    import { createAnimation } from '../../../../dist/index.mjs';
-        
-    const grid = document.querySelector('.grid-container');
-    
-    let dotsString = '';
-    for (let i = 0; i < 360; i++) {
-      dotsString += '<div class="dot"></div>';
-    }
-    grid.innerHTML = dotsString;
-    
-    const dots = document.querySelectorAll('.dot');    
-    const rootAnimation = createAnimation();
-    
-    rootAnimation
-      .duration(500)
-      .easing('ease-in-out')
-      .iterations(Infinity);
-
-    dots.forEach((dot, i) => {
-      const animation = createAnimation(`dot-${i}`);
-      animation
-        .addElement(dot)
-        .delay(i * 10)
-        .keyframes([
-          { transform: 'scale(1)', offset: 0 },
-          { transform: 'scale(2)', offset: 0.5 },
-          { transform: 'scale(1)', offset: 1 }
-        ]);
-      
-      rootAnimation.addAnimation(animation);
-    });
-        
-    document.querySelector('.pause').addEventListener('click', () => {
-      rootAnimation.pause();
-    });
-    
-    document.querySelector('.play').addEventListener('click', () => {
-      rootAnimation.play();
-      console.log('polkay',rootAnimation)
-    });
-  </script>
-  
-  <style>
-    .grid-container {
-      width: 330px;
-      height: 470px;
-      background: rgba(0, 0, 255, 0.5);
-    }
-    
-    .dot {
-      --width: 8px;
-      width: var(--width);
-      height: var(--width);
-      border-radius: var(--width);
-      background: rgba(0, 255, 0, 1);
-      float: left;
-      margin: 6px;
-    }
-    
-    .dot:nth-of-type(2n) {
-      background: rgba(255, 0, 0, 1);
-    }
-    
-    .dot:nth-of-type(3n) {
-      background: rgba(0, 0, 255, 1);
-    }
-  </style>
-  </head>
-
-<body
-  <ion-app>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Animations</ion-title>
-        <ion-buttons slot="end">
-          <ion-button class="pause">Pause</ion-button>
-          <ion-button class="play">Play</ion-button>
-        </ion-buttons>
-      </ion-toolbar>
-    </ion-header>
-    
-    <ion-content>
-      <div class="ion-padding">
-        <div class="grid-container">
-          <div class="dot"></div>
-          <div class="dot"></div>
-          <div class="dot"></div>
-          <div class="dot"></div>
-        </div>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
-
diff --git a/core/src/utils/animation/test/sandbox/index.html b/core/src/utils/animation/test/sandbox/index.html
deleted file mode 100644
index cdfdf84f00..0000000000
--- a/core/src/utils/animation/test/sandbox/index.html
+++ /dev/null
@@ -1,97 +0,0 @@
-<!DOCTYPE html>
-<html dir="ltr">
-
-<head>
-  <meta charset="UTF-8">
-  <title>Animation - Basic</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 type="module">
-    import { createAnimation } from '../../../../dist/collection/utils/animation/animation.js';
-    
-    const cover = document.querySelectorAll('.cover');
-    const square = document.querySelectorAll('.square'); 
-       
-    const rootAnimation = createAnimation();
-    const coverAnimation = createAnimation();
-    const squareAnimation = createAnimation();
-
-    rootAnimation
-      .duration(500)
-      .easing('ease-in-out');
-    
-    coverAnimation
-      .addElement(cover)
-      .beforeStyles({ opacity: '1' })
-      .afterStyles({ opacity: '' });
-    
-    squareAnimation
-      .addElement(square)
-      .beforeClearStyles(['opacity'])
-      .fromTo('opacity', 0.70, 0.03);
-      
-    rootAnimation.addAnimation(coverAnimation);
-    coverAnimation.addAnimation([squareAnimation]);
-
-    let counter = 0;
-    let init = false;
-    document.querySelector('ion-button').addEventListener('click', () => {      
-      if (counter === 100) {
-        counter -= 5;
-      } else {
-        counter += 5;
-      }
-      
-      if (!init) {
-        rootAnimation.progressStart();
-        init = true;
-      }
-      
-      rootAnimation.progressStep(counter / 100);
-    })
-  </script>
-  
-  <style>
-    .cover {
-      opacity: 0;
-    }
-    .square {
-      width: 100px;
-      height: 100px;
-      background: rgba(0, 0, 255, 0.5);
-      text-align: center;
-      line-height: 100px;
-      margin-left: 25px;
-      margin-top: 25px;
-      margin-bottom: 25px;
-      opacity: 0;
-    }
-  </style>
-  </head>
-
-<body
-  <ion-app>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Animations</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    
-    <ion-content>
-      <div class="ion-padding">
-        <ion-button>play step</ion-button>
-        <div class="cover">
-          <div class="square">Hello</div>
-        </div>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
-
diff --git a/core/src/utils/animation/test/simple/index.html b/core/src/utils/animation/test/simple/index.html
deleted file mode 100644
index 5f18bfea5b..0000000000
--- a/core/src/utils/animation/test/simple/index.html
+++ /dev/null
@@ -1,65 +0,0 @@
-<!DOCTYPE html>
-<html dir="ltr">
-
-<head>
-  <meta charset="UTF-8">
-  <title>Animation - Basic</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 type="module">
-    import { createAnimation } from '../../../../dist/index.mjs';
-    
-    const square = document.querySelectorAll('.square');    
-    const animation = createAnimation('animation-a');
-
-    animation
-      .addElement(square)
-      .duration(1000)
-      .easing('ease-in-out')
-      .direction('alternate')
-      .iterations(Infinity)
-      .fromTo('opacity', 0.1, 1);
-
-      animation.play();
-  </script>
-  
-  <style>
-    .square {
-      width: 100px;
-      height: 100px;
-      background: rgba(0, 0, 255, 0.5);
-      text-align: center;
-      line-height: 100px;
-      margin-left: 25px;
-      margin-top: 25px;
-      margin-bottom: 25px;
-      opacity: 0;
-    }
-  </style>
-  </head>
-
-<body
-  <ion-app>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Animations</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    
-    <ion-content>
-      <div class="ion-padding">
-        <div class="square liam-was-here">
-          Hello
-        </div>
-      </div>
-    </ion-content>
-  </ion-app>
-</body>
-
-</html>
-
