diff --git a/docs/utilities/animations.md b/docs/utilities/animations.md
index d53bfbca0e5..8527237f474 100644
--- a/docs/utilities/animations.md
+++ b/docs/utilities/animations.md
@@ -640,213 +640,9 @@ See [Methods](#methods) for a complete list of hooks.
 
 Animations can be chained to run one after the other. The `play` method returns a Promise that resolves when the animation has completed.
 
-### Usage
-
-````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
-const squareA = createAnimation()
-  .addElement(document.querySelector('.square-a'))
-  .fill('none')
-  .duration(1000)
-  .keyframes([
-    { offset: 0, transform: 'scale(1) rotate(0)' },
-    { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
-    { offset: 1, transform: 'scale(1) rotate(0)' }
-  ]);
-
-const squareB = createAnimation()
-  .addElement(document.querySelector('.square-b'))
-  .fill('none')
-  .duration(1000)
-  .keyframes([
-    { offset: 0, transform: 'scale(1)', opacity: '1' },
-    { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
-    { offset: 1, transform: 'scale(1)', opacity: '1' }
-  ]);
-
-const squareC = createAnimation()
-  .addElement(document.querySelector('.square-c'))
-  .fill('none')
-  .duration(1000)
-  .keyframes([
-    { offset: 0, transform: 'scale(1)', opacity: '0.5' },
-    { offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
-    { offset: 1, transform: 'scale(1)', opacity: '0.5' }
-  ]);
-
-await squareA.play();
-await squareB.play();
-await squareC.play();
-```
-</TabItem>
-<TabItem value="angular">
-
-```javascript
-const squareA = this.animationCtrl.create()
-  .addElement(this.squareA.nativeElement)
-  .fill('none')
-  .duration(1000)
-  .keyframes([
-    { offset: 0, transform: 'scale(1) rotate(0)' },
-    { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
-    { offset: 1, transform: 'scale(1) rotate(0)' }
-  ]);
-
-const squareB = this.animationCtrl.create()
-  .addElement(this.squareB.nativeElement)
-  .fill('none')
-  .duration(1000)
-  .keyframes([
-    { offset: 0, transform: 'scale(1)', opacity: '1' },
-    { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
-    { offset: 1, transform: 'scale(1)', opacity: '1' }
-  ]);
-
-const squareC = this.animationCtrl.create()
-  .addElement(this.squareC.nativeElement)
-  .fill('none')
-  .duration(1000)
-  .keyframes([
-    { offset: 0, transform: 'scale(1)', opacity: '0.5' },
-    { offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
-    { offset: 1, transform: 'scale(1)', opacity: '0.5' }
-  ]);
-
-await squareA.play();
-await squareB.play();
-await squareC.play();
-```
-</TabItem>
-<TabItem value="react">
-
-```tsx
-private squareARef: React.RefObject<CreateAnimation> = React.createRef();
-private squareBRef: React.RefObject<CreateAnimation> = React.createRef();
-private squareCRef: React.RefObject<CreateAnimation> = React.createRef();
-
-...
-
-async componentDidMount() {
-  const squareA = this.squareARef.current!.animation;
-  const squareB = this.squareBRef.current!.animation;
-  const squareC = this.squareCRef.current!.animation;
-
-  await squareA.play();
-  await squareB.play();
-  await squareC.play();
-}
-
-render() {
-  return (
-    <>
-      <CreateAnimation
-        ref={this.squareARef}
-        fill="none"
-        duration={1000}
-        keyframes={[
-          { offset: 0, transform: 'scale(1) rotate(0)' },
-          { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
-          { offset: 1, transform: 'scale(1) rotate(0deg)' }
-        ]}
-      >
-        <div className="square"></div>
-      </CreateAnimation>
-
-      <CreateAnimation
-        ref={this.squareBRef}
-        fill="none"
-        duration={1000}
-        keyframes={[
-          { offset: 0, transform: 'scale(1)', opacity: '1' },
-          { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
-          { offset: 1, transform: 'scale(1)', opacity: '1' }
-        ]}
-      >
-        <div className="square"></div>
-      </CreateAnimation>
-
-      <CreateAnimation
-        ref={this.squareCRef}
-        fill="none"
-        duration={1000}
-        keyframes={[
-          { offset: 0, transform: 'scale(1)', opacity: '0.5' },
-          { offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
-          { offset: 1, transform: 'scale(1)', opacity: '0.5' }
-        ]}
-      >
-        <div className="square"></div>
-      </CreateAnimation>
-    </>
-  )
-}
-```
-</TabItem>
-<TabItem value="vue">
-
-```javascript
-import { createAnimation } from '@ionic/vue';
-import { ref } from 'vue';
-
-...
-
-const squareARef = ref();
-const squareBRef = ref();
-const squareCRef = ref();
-
-...
-
-const squareA = createAnimation()
-  .addElement(squareARef.value)
-  .fill('none')
-  .duration(1000)
-  .keyframes([
-    { offset: 0, transform: 'scale(1) rotate(0)' },
-    { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
-    { offset: 1, transform: 'scale(1) rotate(0)' }
-  ]);
-
-const squareB = createAnimation()
-  .addElement(squareBRef.value)
-  .fill('none')
-  .duration(1000)
-  .keyframes([
-    { offset: 0, transform: 'scale(1)', opacity: '1' },
-    { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
-    { offset: 1, transform: 'scale(1)', opacity: '1' }
-  ]);
-
-const squareC = createAnimation()
-  .addElement(squareCRef.value)
-  .fill('none')
-  .duration(1000)
-  .keyframes([
-    { offset: 0, transform: 'scale(1)', opacity: '0.5' },
-    { offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
-    { offset: 1, transform: 'scale(1)', opacity: '0.5' }
-  ]);
-
-await squareA.play();
-await squareB.play();
-await squareC.play();
-```
-</TabItem>
-</Tabs>
-````
+import Chain from '@site/static/usage/v7/animations/chain/index.md';
 
-<Codepen user="ionic" slug="MWgGrwX" height="460" />
+<Chain />
 
 ## Gesture Animations
 
diff --git a/static/usage/v7/animations/chain/angular/example_component_html.md b/static/usage/v7/animations/chain/angular/example_component_html.md
new file mode 100644
index 00000000000..bb61611b10c
--- /dev/null
+++ b/static/usage/v7/animations/chain/angular/example_component_html.md
@@ -0,0 +1,17 @@
+```html
+<ion-card>
+  <ion-card-content>Card 1</ion-card-content>
+</ion-card>
+
+<ion-card>
+  <ion-card-content>Card 2</ion-card-content>
+</ion-card>
+
+<ion-card>
+  <ion-card-content>Card 3</ion-card-content>
+</ion-card>
+
+<ion-button id="play" (click)="play()">Play</ion-button>
+<ion-button id="pause" (click)="pause()">Pause</ion-button>
+<ion-button id="stop" (click)="stop()">Stop</ion-button>
+```
diff --git a/static/usage/v7/animations/chain/angular/example_component_ts.md b/static/usage/v7/animations/chain/angular/example_component_ts.md
new file mode 100644
index 00000000000..6c6acbef993
--- /dev/null
+++ b/static/usage/v7/animations/chain/angular/example_component_ts.md
@@ -0,0 +1,73 @@
+```ts
+import { Component, ElementRef, ViewChildren } from '@angular/core';
+import type { QueryList } from '@angular/core';
+import type { Animation } from '@ionic/angular';
+import { AnimationController, IonCard } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList<ElementRef<HTMLIonCardElement>>;
+
+  private cardA: Animation;
+  private cardB: Animation;
+  private cardC: Animation;
+
+  constructor(private animationCtrl: AnimationController) {}
+
+  ngAfterViewInit() {
+    this.cardA = this.animationCtrl
+      .create()
+      .addElement(this.cardElements.get(0).nativeElement)
+      .fill('none')
+      .duration(1000)
+      .keyframes([
+        { offset: 0, transform: 'scale(1) rotate(0)' },
+        { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
+        { offset: 1, transform: 'scale(1) rotate(0)' },
+      ]);
+
+    this.cardB = this.animationCtrl
+      .create()
+      .addElement(this.cardElements.get(1).nativeElement)
+      .fill('none')
+      .duration(1000)
+      .keyframes([
+        { offset: 0, transform: 'scale(1)', opacity: '1' },
+        { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
+        { offset: 1, transform: 'scale(1)', opacity: '1' },
+      ]);
+
+    this.cardC = this.animationCtrl
+      .create()
+      .addElement(this.cardElements.get(2).nativeElement)
+      .fill('none')
+      .duration(1000)
+      .keyframes([
+        { offset: 0, transform: 'scale(1)', opacity: '0.5' },
+        { offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
+        { offset: 1, transform: 'scale(1)', opacity: '0.5' },
+      ]);
+  }
+
+  async play() {
+    await this.cardA.play();
+    await this.cardB.play();
+    await this.cardC.play();
+  }
+
+  pause() {
+    this.cardA.pause();
+    this.cardB.pause();
+    this.cardC.pause();
+  }
+
+  stop() {
+    this.cardA.stop();
+    this.cardB.stop();
+    this.cardC.stop();
+  }
+}
+```
diff --git a/static/usage/v7/animations/chain/demo.html b/static/usage/v7/animations/chain/demo.html
new file mode 100644
index 00000000000..a16169156ff
--- /dev/null
+++ b/static/usage/v7/animations/chain/demo.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Animation</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;
+
+      const cardA = createAnimation()
+        .addElement(document.querySelector('#card-a'))
+        .fill('none')
+        .duration(1000)
+        .keyframes([
+          { offset: 0, transform: 'scale(1) rotate(0)' },
+          { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
+          { offset: 1, transform: 'scale(1) rotate(0)' },
+        ]);
+
+      const cardB = createAnimation()
+        .addElement(document.querySelector('#card-b'))
+        .fill('none')
+        .duration(1000)
+        .keyframes([
+          { offset: 0, transform: 'scale(1)', opacity: '1' },
+          { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
+          { offset: 1, transform: 'scale(1)', opacity: '1' },
+        ]);
+
+      const cardC = createAnimation()
+        .addElement(document.querySelector('#card-c'))
+        .fill('none')
+        .duration(1000)
+        .keyframes([
+          { offset: 0, transform: 'scale(1)', opacity: '0.5' },
+          { offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
+          { offset: 1, transform: 'scale(1)', opacity: '0.5' },
+        ]);
+
+      document.querySelector('#play').addEventListener('click', async () => {
+        await cardA.play();
+        await cardB.play();
+        await cardC.play();
+      });
+
+      document.querySelector('#pause').addEventListener('click', () => {
+        cardA.pause();
+        cardB.pause();
+        cardC.pause();
+      });
+
+      document.querySelector('#stop').addEventListener('click', () => {
+        cardA.stop();
+        cardB.stop();
+        cardC.stop();
+      });
+    </script>
+
+    <style>
+      .container {
+        flex-direction: column;
+      }
+
+      ion-card {
+        width: 70%;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="container">
+      <ion-card id="card-a">
+        <ion-card-content>Card 1</ion-card-content>
+      </ion-card>
+
+      <ion-card id="card-b">
+        <ion-card-content>Card 2</ion-card-content>
+      </ion-card>
+
+      <ion-card id="card-c">
+        <ion-card-content>Card 3</ion-card-content>
+      </ion-card>
+
+      <div>
+        <ion-button id="play">Play</ion-button>
+        <ion-button id="pause">Pause</ion-button>
+        <ion-button id="stop">Stop</ion-button>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/static/usage/v7/animations/chain/index.md b/static/usage/v7/animations/chain/index.md
new file mode 100644
index 00000000000..58d8c2c888b
--- /dev/null
+++ b/static/usage/v7/animations/chain/index.md
@@ -0,0 +1,25 @@
+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/chain/demo.html"
+  devicePreview={true}
+/>
diff --git a/static/usage/v7/animations/chain/javascript.md b/static/usage/v7/animations/chain/javascript.md
new file mode 100644
index 00000000000..26011045834
--- /dev/null
+++ b/static/usage/v7/animations/chain/javascript.md
@@ -0,0 +1,67 @@
+```html
+<ion-card id="card-a">
+  <ion-card-content>Card 1</ion-card-content>
+</ion-card>
+
+<ion-card id="card-b">
+  <ion-card-content>Card 2</ion-card-content>
+</ion-card>
+
+<ion-card id="card-c">
+  <ion-card-content>Card 3</ion-card-content>
+</ion-card>
+
+<ion-button id="play" onclick="play()">Play</ion-button>
+<ion-button id="pause" onclick="pause()">Pause</ion-button>
+<ion-button id="stop" onclick="stop()">Stop</ion-button>
+
+<script>
+  const cardA = createAnimation()
+    .addElement(document.querySelector('#card-a'))
+    .fill('none')
+    .duration(1000)
+    .keyframes([
+      { offset: 0, transform: 'scale(1) rotate(0)' },
+      { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
+      { offset: 1, transform: 'scale(1) rotate(0)' },
+    ]);
+
+  const cardB = createAnimation()
+    .addElement(document.querySelector('#card-b'))
+    .fill('none')
+    .duration(1000)
+    .keyframes([
+      { offset: 0, transform: 'scale(1)', opacity: '1' },
+      { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
+      { offset: 1, transform: 'scale(1)', opacity: '1' },
+    ]);
+
+  const cardC = createAnimation()
+    .addElement(document.querySelector('#card-c'))
+    .fill('none')
+    .duration(1000)
+    .keyframes([
+      { offset: 0, transform: 'scale(1)', opacity: '0.5' },
+      { offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
+      { offset: 1, transform: 'scale(1)', opacity: '0.5' },
+    ]);
+
+  async function play() {
+    await cardA.play();
+    await cardB.play();
+    await cardC.play();
+  }
+
+  function pause() {
+    cardA.pause();
+    cardB.pause();
+    cardC.pause();
+  }
+
+  function stop() {
+    cardA.stop();
+    cardB.stop();
+    cardC.stop();
+  }
+</script>
+```
diff --git a/static/usage/v7/animations/chain/react.md b/static/usage/v7/animations/chain/react.md
new file mode 100644
index 00000000000..b559f038d7b
--- /dev/null
+++ b/static/usage/v7/animations/chain/react.md
@@ -0,0 +1,95 @@
+```tsx
+import React, { useEffect, useRef } from 'react';
+import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/react';
+import type { Animation } from '@ionic/react';
+
+function Example() {
+  const cardAEl = useRef<HTMLIonCardElement | null>(null);
+  const cardBEl = useRef<HTMLIonCardElement | null>(null);
+  const cardCEl = useRef<HTMLIonCardElement | null>(null);
+
+  const cardA = useRef<Animation>();
+  const cardB = useRef<Animation>();
+  const cardC = useRef<Animation>();
+
+  useEffect(() => {
+    if (!cardA.current) {
+      cardA.current = createAnimation()
+        .addElement(cardAEl.current!)
+        .fill('none')
+        .duration(1000)
+        .keyframes([
+          { offset: 0, transform: 'scale(1) rotate(0)' },
+          { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
+          { offset: 1, transform: 'scale(1) rotate(0)' },
+        ]);
+    }
+
+    if (!cardB.current) {
+      cardB.current = createAnimation()
+        .addElement(cardBEl.current!)
+        .fill('none')
+        .duration(1000)
+        .keyframes([
+          { offset: 0, transform: 'scale(1)', opacity: '1' },
+          { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
+          { offset: 1, transform: 'scale(1)', opacity: '1' },
+        ]);
+    }
+    if (!cardC.current) {
+      cardC.current = createAnimation()
+        .addElement(cardCEl.current!)
+        .fill('none')
+        .duration(1000)
+        .keyframes([
+          { offset: 0, transform: 'scale(1)', opacity: '0.5' },
+          { offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
+          { offset: 1, transform: 'scale(1)', opacity: '0.5' },
+        ]);
+    }
+  }, [cardAEl, cardBEl, cardCEl]);
+
+  const play = async () => {
+    await cardA.current?.play();
+    await cardB.current?.play();
+    await cardC.current?.play();
+  };
+  const pause = () => {
+    cardA.current?.pause();
+    cardB.current?.pause();
+    cardC.current?.pause();
+  };
+  const stop = () => {
+    cardA.current?.stop();
+    cardB.current?.stop();
+    cardC.current?.stop();
+  };
+
+  return (
+    <>
+      <IonCard ref={cardAEl}>
+        <IonCardContent>Card 1</IonCardContent>
+      </IonCard>
+
+      <IonCard ref={cardBEl}>
+        <IonCardContent>Card 2</IonCardContent>
+      </IonCard>
+
+      <IonCard ref={cardCEl}>
+        <IonCardContent>Card 3</IonCardContent>
+      </IonCard>
+
+      <IonButton id="play" onClick={play}>
+        Play
+      </IonButton>
+      <IonButton id="pause" onClick={pause}>
+        Pause
+      </IonButton>
+      <IonButton id="stop" onClick={stop}>
+        Stop
+      </IonButton>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/animations/chain/vue.md b/static/usage/v7/animations/chain/vue.md
new file mode 100644
index 00000000000..67077e8efa1
--- /dev/null
+++ b/static/usage/v7/animations/chain/vue.md
@@ -0,0 +1,100 @@
+```html
+<template>
+  <ion-card ref="cardAEl">
+    <ion-card-content>Card 1</ion-card-content>
+  </ion-card>
+
+  <ion-card ref="cardBEl">
+    <ion-card-content>Card 2</ion-card-content>
+  </ion-card>
+
+  <ion-card ref="cardCEl">
+    <ion-card-content>Card 3</ion-card-content>
+  </ion-card>
+
+  <ion-button id="play" @click="play()">Play</ion-button>
+  <ion-button id="pause" @click="pause()">Pause</ion-button>
+  <ion-button id="stop" @click="stop()">Stop</ion-button>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/vue';
+  import type { Animation } from '@ionic/vue';
+
+  import { defineComponent, ref, onMounted } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonButton,
+      IonCard,
+      IonCardContent,
+    },
+    setup() {
+      const cardAEl = ref(null);
+      const cardBEl = ref(null);
+      const cardCEl = ref(null);
+
+      let cardA: Animation | undefined;
+      let cardB: Animation | undefined;
+      let cardC: Animation | undefined;
+
+      onMounted(() => {
+        cardA = createAnimation()
+          .addElement(cardAEl.value.$el)
+          .fill('none')
+          .duration(1000)
+          .keyframes([
+            { offset: 0, transform: 'scale(1) rotate(0)' },
+            { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
+            { offset: 1, transform: 'scale(1) rotate(0)' },
+          ]);
+
+        cardB = createAnimation()
+          .addElement(cardBEl.value.$el)
+          .fill('none')
+          .duration(1000)
+          .keyframes([
+            { offset: 0, transform: 'scale(1)', opacity: '1' },
+            { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
+            { offset: 1, transform: 'scale(1)', opacity: '1' },
+          ]);
+
+        cardC = createAnimation()
+          .addElement(cardCEl.value.$el)
+          .fill('none')
+          .duration(1000)
+          .keyframes([
+            { offset: 0, transform: 'scale(1)', opacity: '0.5' },
+            { offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
+            { offset: 1, transform: 'scale(1)', opacity: '0.5' },
+          ]);
+      });
+
+      const play = async () => {
+        await cardA?.play();
+        await cardB?.play();
+        await cardC?.play();
+      };
+      const pause = () => {
+        cardA?.pause();
+        cardB?.pause();
+        cardC?.pause();
+      };
+      const stop = () => {
+        cardA?.stop();
+        cardB?.stop();
+        cardC?.stop();
+      };
+
+      return {
+        play,
+        pause,
+        stop,
+        cardAEl,
+        cardBEl,
+        cardCEl,
+      };
+    },
+  });
+</script>
+```