diff --git a/docs/utilities/animations.md b/docs/utilities/animations.md
index 92c6eebc67a..d53bfbca0e5 100644
--- a/docs/utilities/animations.md
+++ b/docs/utilities/animations.md
@@ -1279,236 +1279,9 @@ Certain Ionic components allow developers to provide custom animations. All anim
 
 ### Modals
 
-````mdx-code-block
-<Tabs
-  groupId="framework"
-  defaultValue="javascript"
-  values={[
-    { value: 'javascript', label: 'JavaScript' },
-    { value: 'angular', label: 'Angular' },
-    { value: 'react', label: 'React' },
-    { value: 'vue', label: 'Vue' },
-  ]
-}>
-<TabItem value="javascript">
-
-```javascript
-customElements.define('modal-page', class extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = `
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Modal Header</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content class="ion-padding">
-        Modal Content
-      </ion-content>
-    `;
-  }
-});
-
-function presentModal() {
-  const enterAnimation = (baseEl: any) => {
-    const root = baseEl.shadowRoot;
-
-    const backdropAnimation = createAnimation()
-      .addElement(root.querySelector('ion-backdrop')!)
-      .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
-
-    const wrapperAnimation = createAnimation()
-      .addElement(root.querySelector('.modal-wrapper')!)
-      .keyframes([
-        { offset: 0, opacity: '0', transform: 'scale(0)' },
-        { offset: 1, opacity: '0.99', transform: 'scale(1)' }
-      ]);
-
-    return createAnimation()
-      .addElement(baseEl)
-      .easing('ease-out')
-      .duration(500)
-      .addAnimation([backdropAnimation, wrapperAnimation]);
-  }
-
-  const leaveAnimation = (baseEl: any) => {
-    return enterAnimation(baseEl).direction('reverse');
-  }
-
-  // create the modal with the `modal-page` component
-  const modalElement = document.createElement('ion-modal');
-  modalElement.component = 'modal-page';
-  modalElement.enterAnimation = enterAnimation;
-  modalElement.leaveAnimation = leaveAnimation;
-
-  // present the modal
-  document.body.appendChild(modalElement);
-  return modalElement.present();
-}
-```
-</TabItem>
-<TabItem value="angular">
-
-```tsx
-import { Component } from '@angular/core';
-import { ModalController, AnimationController } from '@ionic/angular';
-import { ModalPage } from '../modal/modal.page';
-
-@Component({
-  selector: 'modal-example',
-  templateUrl: 'modal-example.html',
-  styleUrls: ['./modal-example.css']
-})
-export class ModalExample {
-  constructor(public modalController: ModalController,
-              public animationCtrl: AnimationController) { }
-
-  async presentModal() {
-    const enterAnimation = (baseEl: any) => {
-      const root = baseEl.shadowRoot;
-
-      const backdropAnimation = this.animationCtrl.create()
-        .addElement(root.querySelector('ion-backdrop')!)
-        .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
-
-      const wrapperAnimation = this.animationCtrl.create()
-        .addElement(root.querySelector('.modal-wrapper')!)
-        .keyframes([
-          { offset: 0, opacity: '0', transform: 'scale(0)' },
-          { offset: 1, opacity: '0.99', transform: 'scale(1)' }
-        ]);
-
-      return this.animationCtrl.create()
-        .addElement(baseEl)
-        .easing('ease-out')
-        .duration(500)
-        .addAnimation([backdropAnimation, wrapperAnimation]);
-    }
-
-    const leaveAnimation = (baseEl: any) => {
-      return enterAnimation(baseEl).direction('reverse');
-    }
-
-    const modal = await this.modalController.create({
-      component: ModalPage,
-      enterAnimation,
-      leaveAnimation
-    });
-    return await modal.present();
-  }
-}
-```
-</TabItem>
-<TabItem value="react">
-
-```jsx
-import React, { useState } from 'react';
-import { createAnimation, IonModal, IonButton, IonContent } from '@ionic/react';
-
-export const ModalExample: React.FC = () => {
-  const [showModal, setShowModal] = useState(false);
-
-  const enterAnimation = (baseEl: any) => {
-    const root = baseEl.shadowRoot;
-
-    const backdropAnimation = createAnimation()
-      .addElement(root.querySelector('ion-backdrop')!)
-      .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
-
-    const wrapperAnimation = createAnimation()
-      .addElement(root.querySelector('.modal-wrapper')!)
-      .keyframes([
-        { offset: 0, opacity: '0', transform: 'scale(0)' },
-        { offset: 1, opacity: '0.99', transform: 'scale(1)' }
-      ]);
-
-    return createAnimation()
-      .addElement(baseEl)
-      .easing('ease-out')
-      .duration(500)
-      .addAnimation([backdropAnimation, wrapperAnimation]);
-  }
-
-  const leaveAnimation = (baseEl: any) => {
-    return enterAnimation(baseEl).direction('reverse');
-  }
-
-  return (
-    <IonContent>
-      <IonModal isOpen={showModal} enterAnimation={enterAnimation} leaveAnimation={leaveAnimation}>
-        <p>This is modal content</p>
-        <IonButton onClick={() => setShowModal(false)}>Close Modal</IonButton>
-      </IonModal>
-      <IonButton onClick={() => setShowModal(true)}>Show Modal</IonButton>
-    </IonContent>
-  );
-};
-```
-</TabItem>
-<TabItem value="vue">
-
-```jsx
-<template>
-  <ion-page>
-    <ion-content>
-      <ion-modal
-        :is-open="isModalOpen"
-        :enter-animation="enterAnimation"
-        :leave-animation="leaveAnimation"
-        @didDismiss="setModalOpen(false)"
-      >
-        Modal content goes here.
-      </ion-modal>
-
-      <ion-button @click="setModalOpen(true)">Show Modal</ion-button>
-    </ion-content>
-  </ion-page>
-</template>
-
-<script lang="ts">
-import { createAnimation, IonButton, IonContent, IonModal, IonPage } from '@ionic/vue';
-import { defineComponent, ref } from 'vue';
-
-export default defineComponent({
-  components: { IonButton, IonContent, IonModal, IonPage },
-  setup() {
-    const isModalOpen = ref(false);
-    const setModalOpen = (state) => isModalOpen.value = state;
-
-    const enterAnimation = (baseEl: any) => {
-      const root = baseEl.shadowRoot;
-
-      const backdropAnimation = createAnimation()
-        .addElement(root.querySelector('ion-backdrop')!)
-        .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
-
-      const wrapperAnimation = createAnimation()
-        .addElement(root.querySelector('.modal-wrapper')!)
-        .keyframes([
-          { offset: 0, opacity: '0', transform: 'scale(0)' },
-          { offset: 1, opacity: '0.99', transform: 'scale(1)' }
-        ]);
-
-      return createAnimation()
-        .addElement(baseEl)
-        .easing('ease-out')
-        .duration(500)
-        .addAnimation([backdropAnimation, wrapperAnimation]);
-    }
-
-    const leaveAnimation = (baseEl: any) => {
-      return enterAnimation(baseEl).direction('reverse');
-    }
-
-    return { isModalOpen, setModalOpen, enterAnimation, leaveAnimation }
-  }
-})
-</script>
-```
-</TabItem>
-</Tabs>
-````
+import ModalOverride from '@site/static/usage/v7/animations/modal-override/index.md';
 
-<Codepen user="ionic" slug="ExapZBZ" />
+<ModalOverride />
 
 ## Performance Considerations
 
diff --git a/static/code/stackblitz/v7/html/index.ts b/static/code/stackblitz/v7/html/index.ts
index 952785602e6..c820961c828 100644
--- a/static/code/stackblitz/v7/html/index.ts
+++ b/static/code/stackblitz/v7/html/index.ts
@@ -1,6 +1,6 @@
 import { defineCustomElements } from '@ionic/core/loader';
 
-import { loadingController, modalController, pickerController, toastController } from '@ionic/core';
+import { createAnimation, loadingController, modalController, pickerController, toastController } from '@ionic/core';
 
 /* Core CSS required for Ionic components to work properly */
 import '@ionic/core/css/core.css';
@@ -27,3 +27,4 @@ defineCustomElements();
 (window as any).modalController = modalController;
 (window as any).pickerController = pickerController;
 (window as any).toastController = toastController;
+(window as any).createAnimation = createAnimation;
diff --git a/static/usage/v7/animations/modal-override/angular/example_component_html.md b/static/usage/v7/animations/modal-override/angular/example_component_html.md
new file mode 100644
index 00000000000..178ae34c17b
--- /dev/null
+++ b/static/usage/v7/animations/modal-override/angular/example_component_html.md
@@ -0,0 +1,23 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Page</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-button id="modal-trigger">Present Modal</ion-button>
+  <ion-modal trigger="modal-trigger" #modal>
+    <ng-template>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Modal</ion-title>
+          <ion-buttons slot="end">
+            <ion-button (click)="closeModal()">Close</ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding"> Modal Content </ion-content>
+    </ng-template>
+  </ion-modal>
+</ion-content>
+```
diff --git a/static/usage/v7/animations/modal-override/angular/example_component_ts.md b/static/usage/v7/animations/modal-override/angular/example_component_ts.md
new file mode 100644
index 00000000000..b1fe997c1d4
--- /dev/null
+++ b/static/usage/v7/animations/modal-override/angular/example_component_ts.md
@@ -0,0 +1,52 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+import type { IonModal } from '@ionic/angular';
+import { AnimationController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  @ViewChild('modal', { static: true }) modal: IonModal;
+
+  constructor(private animationCtrl: AnimationController) {}
+
+  ngOnInit() {
+    const enterAnimation = (baseEl: HTMLElement) => {
+      const root = baseEl.shadowRoot;
+
+      const backdropAnimation = this.animationCtrl
+        .create()
+        .addElement(root.querySelector('ion-backdrop'))
+        .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+
+      const wrapperAnimation = this.animationCtrl
+        .create()
+        .addElement(root.querySelector('.modal-wrapper'))
+        .keyframes([
+          { offset: 0, opacity: '0', transform: 'scale(0)' },
+          { offset: 1, opacity: '0.99', transform: 'scale(1)' },
+        ]);
+
+      return this.animationCtrl
+        .create()
+        .addElement(baseEl)
+        .easing('ease-out')
+        .duration(500)
+        .addAnimation([backdropAnimation, wrapperAnimation]);
+    };
+
+    const leaveAnimation = (baseEl: HTMLElement) => {
+      return enterAnimation(baseEl).direction('reverse');
+    };
+
+    this.modal.enterAnimation = enterAnimation;
+    this.modal.leaveAnimation = leaveAnimation;
+  }
+
+  closeModal() {
+    this.modal.dismiss();
+  }
+}
+```
diff --git a/static/usage/v7/animations/modal-override/demo.html b/static/usage/v7/animations/modal-override/demo.html
new file mode 100644
index 00000000000..15da72756db
--- /dev/null
+++ b/static/usage/v7/animations/modal-override/demo.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Accordion</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <script type="module">
+      import { createAnimation } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/index.esm.js';
+      window.createAnimation = createAnimation;
+    </script>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Page</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <div class="container">
+          <ion-button id="modal-trigger">Present Modal</ion-button>
+          <ion-modal trigger="modal-trigger">
+            <ion-header>
+              <ion-toolbar>
+                <ion-title>Modal</ion-title>
+                <ion-buttons slot="end">
+                  <ion-button onclick="closeModal()">Close</ion-button>
+                </ion-buttons>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content class="ion-padding"> Modal Content </ion-content>
+          </ion-modal>
+        </div>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      const modal = document.querySelector('ion-modal');
+
+      const closeModal = () => {
+        modal.dismiss();
+      };
+
+      const enterAnimation = (baseEl) => {
+        const root = baseEl.shadowRoot;
+
+        const backdropAnimation = createAnimation()
+          .addElement(root.querySelector('ion-backdrop'))
+          .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+
+        const wrapperAnimation = createAnimation()
+          .addElement(root.querySelector('.modal-wrapper'))
+          .keyframes([
+            { offset: 0, opacity: '0', transform: 'scale(0)' },
+            { offset: 1, opacity: '0.99', transform: 'scale(1)' },
+          ]);
+
+        return createAnimation()
+          .addElement(baseEl)
+          .easing('ease-out')
+          .duration(500)
+          .addAnimation([backdropAnimation, wrapperAnimation]);
+      };
+
+      const leaveAnimation = (baseEl) => {
+        return enterAnimation(baseEl).direction('reverse');
+      };
+
+      modal.enterAnimation = enterAnimation;
+      modal.leaveAnimation = leaveAnimation;
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/animations/modal-override/index.md b/static/usage/v7/animations/modal-override/index.md
new file mode 100644
index 00000000000..ba289f42c62
--- /dev/null
+++ b/static/usage/v7/animations/modal-override/index.md
@@ -0,0 +1,26 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/animations/modal-override/demo.html"
+  devicePreview={true}
+  includeIonContent={false}
+/>
diff --git a/static/usage/v7/animations/modal-override/javascript.md b/static/usage/v7/animations/modal-override/javascript.md
new file mode 100644
index 00000000000..0efad523d3b
--- /dev/null
+++ b/static/usage/v7/animations/modal-override/javascript.md
@@ -0,0 +1,57 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Page</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-button id="modal-trigger">Present Modal</ion-button>
+  <ion-modal trigger="modal-trigger">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Modal</ion-title>
+        <ion-buttons slot="end">
+          <ion-button onclick="closeModal()">Close</ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding"> Modal Content </ion-content>
+  </ion-modal>
+</ion-content>
+
+<script>
+  const modal = document.querySelector('ion-modal');
+
+  var closeModal = () => {
+    modal.dismiss();
+  };
+
+  const enterAnimation = (baseEl) => {
+    const root = baseEl.shadowRoot;
+
+    const backdropAnimation = createAnimation()
+      .addElement(root.querySelector('ion-backdrop'))
+      .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+
+    const wrapperAnimation = createAnimation()
+      .addElement(root.querySelector('.modal-wrapper'))
+      .keyframes([
+        { offset: 0, opacity: '0', transform: 'scale(0)' },
+        { offset: 1, opacity: '0.99', transform: 'scale(1)' },
+      ]);
+
+    return createAnimation()
+      .addElement(baseEl)
+      .easing('ease-out')
+      .duration(500)
+      .addAnimation([backdropAnimation, wrapperAnimation]);
+  };
+
+  const leaveAnimation = (baseEl) => {
+    return enterAnimation(baseEl).direction('reverse');
+  };
+
+  modal.enterAnimation = enterAnimation;
+  modal.leaveAnimation = leaveAnimation;
+</script>
+```
diff --git a/static/usage/v7/animations/modal-override/react.md b/static/usage/v7/animations/modal-override/react.md
new file mode 100644
index 00000000000..730881c49a9
--- /dev/null
+++ b/static/usage/v7/animations/modal-override/react.md
@@ -0,0 +1,71 @@
+```tsx
+import React, { useRef } from 'react';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonModal,
+  IonToolbar,
+  IonTitle,
+  createAnimation,
+} from '@ionic/react';
+
+function Example() {
+  const modalEl = useRef<HTMLIonModalElement>(null);
+
+  const enterAnimation = (baseEl: HTMLElement) => {
+    const root = baseEl.shadowRoot!;
+
+    const backdropAnimation = createAnimation()
+      .addElement(root.querySelector('ion-backdrop')!)
+      .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+
+    const wrapperAnimation = createAnimation()
+      .addElement(root.querySelector('.modal-wrapper')!)
+      .keyframes([
+        { offset: 0, opacity: '0', transform: 'scale(0)' },
+        { offset: 1, opacity: '0.99', transform: 'scale(1)' },
+      ]);
+
+    return createAnimation()
+      .addElement(baseEl)
+      .easing('ease-out')
+      .duration(500)
+      .addAnimation([backdropAnimation, wrapperAnimation]);
+  };
+
+  const leaveAnimation = (baseEl: HTMLElement) => {
+    return enterAnimation(baseEl).direction('reverse');
+  };
+
+  const closeModal = () => {
+    modalEl.current?.dismiss();
+  };
+
+  return (
+    <>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Page</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <IonButton id="modal-trigger">Present Modal</IonButton>
+        <IonModal trigger="modal-trigger" ref={modalEl} enterAnimation={enterAnimation} leaveAnimation={leaveAnimation}>
+          <IonHeader>
+            <IonToolbar>
+              <IonTitle>Modal</IonTitle>
+              <IonButtons slot="end">
+                <IonButton onClick={closeModal}>Close</IonButton>
+              </IonButtons>
+            </IonToolbar>
+          </IonHeader>
+          <IonContent className="ion-padding">Modal Content</IonContent>
+        </IonModal>
+      </IonContent>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/animations/modal-override/vue.md b/static/usage/v7/animations/modal-override/vue.md
new file mode 100644
index 00000000000..82c05ba66e6
--- /dev/null
+++ b/static/usage/v7/animations/modal-override/vue.md
@@ -0,0 +1,90 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Page</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <ion-button id="modal-trigger">Present Modal</ion-button>
+    <ion-modal trigger="modal-trigger" ref="modalEl" :enterAnimation="enterAnimation" :leaveAnimation="leaveAnimation">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Modal</ion-title>
+          <ion-buttons slot="end">
+            <ion-button @click="closeModal()">Close</ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding"> Modal Content </ion-content>
+    </ion-modal>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import {
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonModal,
+    IonToolbar,
+    IonTitle,
+    createAnimation,
+  } from '@ionic/vue';
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonButton,
+      IonButtons,
+      IonContent,
+      IonHeader,
+      IonModal,
+      IonToolbar,
+      IonTitle,
+    },
+    setup() {
+      const modalEl = ref(null);
+
+      const enterAnimation = (baseEl: HTMLElement) => {
+        const root = baseEl.shadowRoot;
+
+        const backdropAnimation = createAnimation()
+          .addElement(root!.querySelector('ion-backdrop')!)
+          .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+
+        const wrapperAnimation = createAnimation()
+          .addElement(root!.querySelector('.modal-wrapper')!)
+          .keyframes([
+            { offset: 0, opacity: '0', transform: 'scale(0)' },
+            { offset: 1, opacity: '0.99', transform: 'scale(1)' },
+          ]);
+
+        return createAnimation()
+          .addElement(baseEl)
+          .easing('ease-out')
+          .duration(500)
+          .addAnimation([backdropAnimation, wrapperAnimation]);
+      };
+
+      const leaveAnimation = (baseEl: HTMLElement) => {
+        return enterAnimation(baseEl).direction('reverse');
+      };
+
+      const closeModal = () => {
+        modalEl.value?.$el.dismiss();
+      };
+
+      return {
+        close,
+        modalEl,
+        closeModal,
+        enterAnimation,
+        leaveAnimation,
+      };
+    },
+  });
+</script>
+```