diff --git a/core/src/components/alert/test/trigger/index.html b/core/src/components/alert/test/trigger/index.html
index 233b05fc93..d2d7bc3b22 100644
--- a/core/src/components/alert/test/trigger/index.html
+++ b/core/src/components/alert/test/trigger/index.html
@@ -11,6 +11,13 @@
     <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+
+    <script type="module">
+      import * as motion from 'https://esm.run/motion';
+
+      window.motionOne = motion;
+    </script>
+
   </head>
 
   <body>
@@ -23,25 +30,47 @@
 
       <ion-content class="ion-padding">
         <ion-button id="default">Open Alert</ion-button>
-        <ion-button id="timeout">Open Alert, Close After 500ms</ion-button>
 
-        <ion-alert id="default-alert" trigger="default" header="Alert" message="Hello World!"></ion-alert>
-        <ion-alert id="timeout-alert" trigger="timeout" header="Alert" message="Hello World!"></ion-alert>
+        <ion-alert id="custom-alert" trigger="default" header="Alert" message="Hello World!"></ion-alert>
       </ion-content>
     </ion-app>
 
     <script>
-      const defaultAlert = document.querySelector('#default-alert');
-      const timeoutAlert = document.querySelector('#timeout-alert');
+      const customAlert = document.querySelector('#custom-alert');
 
-      defaultAlert.buttons = ['OK'];
-      timeoutAlert.buttons = ['OK'];
+      customAlert.enterAnimation = async (el, opts, done) => {
+        const { animate } = window.motionOne;
+        const backdropAni = animate('#custom-alert ion-backdrop', {
+          opacity: 'var(--backdrop-opacity)'
+        });
 
-      timeoutAlert.addEventListener('didPresent', () => {
-        setTimeout(() => {
-          timeoutAlert.dismiss();
-        }, 500);
-      });
+        const wrapperAni = animate('#custom-alert .alert-wrapper', {
+          opacity: 1,
+          transform: ['scale(1.5)', 'scale(1)']
+        })
+
+        await Promise.all([wrapperAni.finished, backdropAni.finished]);
+
+        done();
+      }
+
+      customAlert.leaveAnimation = async (el, opts, done) => {
+        const { animate } = window.motionOne;
+        const backdropAni = animate('#custom-alert ion-backdrop', {
+          opacity: 0
+        });
+
+        const wrapperAni = animate('#custom-alert .alert-wrapper', {
+          opacity: 0,
+          transform: 'scale(0.5)'
+        })
+
+        await Promise.all([wrapperAni.finished, backdropAni.finished]);
+
+        done();
+      }
+
+      customAlert.buttons = ['OK'];
     </script>
   </body>
 </html>
diff --git a/core/src/components/modal/animations/ios.leave.ts b/core/src/components/modal/animations/ios.leave.ts
index 85b4aaccda..257850d966 100644
--- a/core/src/components/modal/animations/ios.leave.ts
+++ b/core/src/components/modal/animations/ios.leave.ts
@@ -17,7 +17,8 @@ const createLeaveAnimation = () => {
 /**
  * iOS Modal Leave Animation
  */
-export const iosLeaveAnimation = (baseEl: HTMLElement, opts: ModalAnimationOptions, duration = 500): Animation => {
+export const iosLeaveAnimation = (baseEl: HTMLElement, opts: ModalAnimationOptions): Animation => {
+  const duration = 500;
   const { presentingEl, currentBreakpoint } = opts;
   const root = getElementRoot(baseEl);
   const { wrapperAnimation, backdropAnimation } =
diff --git a/core/src/utils/animation/animation-interface.ts b/core/src/utils/animation/animation-interface.ts
index b28b9fdd3d..447cac755c 100644
--- a/core/src/utils/animation/animation-interface.ts
+++ b/core/src/utils/animation/animation-interface.ts
@@ -264,4 +264,4 @@ export type AnimationPlayTo = 'start' | 'end';
 export type AnimationDirection = 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
 export type AnimationFill = 'auto' | 'none' | 'forwards' | 'backwards' | 'both';
 
-export type AnimationBuilder = (baseEl: any, opts?: any) => Animation;
+export type AnimationBuilder = (baseEl: any, opts?: any, done?: () => void) => Animation;
diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts
index 3f8c83d59d..243d3a9b9c 100644
--- a/core/src/utils/overlays.ts
+++ b/core/src/utils/overlays.ts
@@ -583,26 +583,35 @@ const overlayAnimation = async (
   baseEl.classList.remove('overlay-hidden');
 
   const aniRoot = overlay.el;
-  const animation = animationBuilder(aniRoot, opts);
 
-  if (!overlay.animated || !config.getBoolean('animated', true)) {
-    animation.duration(0);
+  let resolvePromise;
+  let promise = new Promise((resolve) => {
+    resolvePromise = () => { resolve(true) };
+  })
+
+  const animation = animationBuilder(aniRoot, opts, resolvePromise);
+  if (animation.beforeAddWrite === undefined) {
+    await promise;
+  } else {
+    if (!overlay.animated || !config.getBoolean('animated', true)) {
+      animation.duration(0);
+    }
+
+    if (overlay.keyboardClose) {
+      animation.beforeAddWrite(() => {
+        const activeElement = baseEl.ownerDocument!.activeElement as HTMLElement;
+        if (activeElement?.matches('input,ion-input, ion-textarea')) {
+          activeElement.blur();
+        }
+      });
+    }
+
+    const activeAni = activeAnimations.get(overlay) || [];
+    activeAnimations.set(overlay, [...activeAni, animation]);
+
+    await animation.play();
   }
 
-  if (overlay.keyboardClose) {
-    animation.beforeAddWrite(() => {
-      const activeElement = baseEl.ownerDocument!.activeElement as HTMLElement;
-      if (activeElement?.matches('input,ion-input, ion-textarea')) {
-        activeElement.blur();
-      }
-    });
-  }
-
-  const activeAni = activeAnimations.get(overlay) || [];
-  activeAnimations.set(overlay, [...activeAni, animation]);
-
-  await animation.play();
-
   return true;
 };
 
