From f8a5f369effb76f94881cb5bafe5419d0b568520 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 10 Jul 2023 12:33:27 -0400
Subject: [PATCH 01/13] docs(animation): add iframe and JS grouped demo

---
 docs/utilities/animations.md                  | 203 +-----------------
 .../group/angular/example_component_html.md   |  23 ++
 .../group/angular/example_component_ts.md     |  52 +++++
 static/usage/v7/animations/group/demo.html    |  87 ++++++++
 static/usage/v7/animations/group/index.md     |  25 +++
 .../usage/v7/animations/group/javascript.md   |  49 +++++
 static/usage/v7/animations/group/react.md     |  71 ++++++
 static/usage/v7/animations/group/vue.md       |  90 ++++++++
 8 files changed, 400 insertions(+), 200 deletions(-)
 create mode 100644 static/usage/v7/animations/group/angular/example_component_html.md
 create mode 100644 static/usage/v7/animations/group/angular/example_component_ts.md
 create mode 100644 static/usage/v7/animations/group/demo.html
 create mode 100644 static/usage/v7/animations/group/index.md
 create mode 100644 static/usage/v7/animations/group/javascript.md
 create mode 100644 static/usage/v7/animations/group/react.md
 create mode 100644 static/usage/v7/animations/group/vue.md

diff --git a/docs/utilities/animations.md b/docs/utilities/animations.md
index d53bfbca0e5..728426dd6ce 100644
--- a/docs/utilities/animations.md
+++ b/docs/utilities/animations.md
@@ -316,208 +316,11 @@ Each keyframe object contains an `offset` property. `offset` is a value between
 
 Multiple elements can be animated at the same time and controlled via a single parent animation object. Child animations inherit properties such as duration, easing, and iterations unless otherwise specified. A parent animation's `onFinish` callback will not be called until all child animations have 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'))
-  .keyframes([
-    { offset: 0, transform: 'scale(1) rotate(0)' },
-    { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
-    { offset: 1, transform: 'scale(1) rotate(45deg)' }
-  ]);
-
-const squareB = createAnimation()
-  .addElement(document.querySelector('.square-b'))
-  .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'))
-  .duration(5000)
-  .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 parent = createAnimation()
-  .duration(2000)
-  .iterations(Infinity)
-  .addAnimation([squareA, squareB, squareC]);
-```
-
-</TabItem>
-<TabItem value="angular">
-
-```javascript
-const squareA = this.animationCtrl.create()
-  .addElement(this.squareA.nativeElement)
-  .keyframes([
-    { offset: 0, transform: 'scale(1) rotate(0)' },
-    { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
-    { offset: 1, transform: 'scale(1) rotate(45deg)' }
-  ]);
-
-const squareB = this.animationCtrl.create()
-  .addElement(this.squareB.nativeElement)
-  .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)
-  .duration(5000)
-  .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 parent = this.animationCtrl.create()
-  .duration(2000)
-  .iterations(Infinity)
-  .addAnimation([squareA, squareB, squareC]);
-```
-
-</TabItem>
-<TabItem value="react">
-
-```tsx
-private parentRef: React.RefObject<CreateAnimation> = React.createRef();
-private squareARef: React.RefObject<CreateAnimation> = React.createRef();
-private squareBRef: React.RefObject<CreateAnimation> = React.createRef();
-private squareCRef: React.RefObject<CreateAnimation> = React.createRef();
-
-...
-
-componentDidMount() {
-  const parent = this.parentRef.current!.animation;
-  const squareA = this.squareARef.current!.animation;
-  const squareB = this.squareBRef.current!.animation;
-  const squareC = this.squareCRef.current!.animation;
-
-  parent.addAnimation([squareA, squareB, squareC]);
-}
-
-render() {
-  return (
-    <>
-      <CreateAnimation
-        ref={this.parentRef}
-        duration={2000}
-        iterations={Infinity}
-      ></CreateAnimation>
-
-      <CreateAnimation
-        ref={this.squareARef}
-        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}
-        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}
-        duration={5000}
-        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)
-  .keyframes([
-    { offset: 0, transform: 'scale(1) rotate(0)' },
-    { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
-    { offset: 1, transform: 'scale(1) rotate(45deg)' }
-  ]);
-
-const squareB = createAnimation()
-  .addElement(squareBRef.value)
-  .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)
-  .duration(5000)
-  .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 parent = createAnimation()
-  .duration(2000)
-  .iterations(Infinity)
-  .addAnimation([squareA, squareB, squareC]);
-```
-
-</TabItem>
-</Tabs>
-````
-
 This example shows 3 child animations controlled by a single parent animation. Animations `squareA` and `squareB` inherit the parent animation's duration of 2000ms, but animation `squareC` has a duration of 5000ms since it was explicitly set.
 
-<Codepen user="ionic" slug="oNvdogM" height="460" />
+import Group from '@site/static/usage/v7/animations/group/index.md';
+
+<Group />
 
 ## Before and After Hooks
 
diff --git a/static/usage/v7/animations/group/angular/example_component_html.md b/static/usage/v7/animations/group/angular/example_component_html.md
new file mode 100644
index 00000000000..178ae34c17b
--- /dev/null
+++ b/static/usage/v7/animations/group/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/group/angular/example_component_ts.md b/static/usage/v7/animations/group/angular/example_component_ts.md
new file mode 100644
index 00000000000..b1fe997c1d4
--- /dev/null
+++ b/static/usage/v7/animations/group/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/group/demo.html b/static/usage/v7/animations/group/demo.html
new file mode 100644
index 00000000000..afc81b2df8d
--- /dev/null
+++ b/static/usage/v7/animations/group/demo.html
@@ -0,0 +1,87 @@
+<!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 squareA = createAnimation()
+        .addElement(document.querySelector('.card-a'))
+        .keyframes([
+          { offset: 0, transform: 'scale(1) rotate(0)' },
+          { offset: 0.5, transform: 'scale(1.5) rotate(45deg)' },
+          { offset: 1, transform: 'scale(1) rotate(0) '}
+        ]);
+
+      const squareB = createAnimation()
+        .addElement(document.querySelector('.card-b'))
+        .keyframes([
+          { offset: 0, transform: 'scale(1)', opacity: '1' },
+          { offset: 0.5, transform: 'scale(1.5)', opacity: '0.3' },
+          { offset: 1, transform: 'scale(1)', opacity: '1' }
+        ]);
+
+      const squareC = createAnimation()
+        .addElement(document.querySelector('.card-c'))
+        .duration(5000)
+        .keyframes([
+          { offset: 0, transform: 'scale(1)', opacity: '0.5' },
+          { offset: 0.5, transform: 'scale(0.5)', opacity: '1' },
+          { offset: 1, transform: 'scale(1)', opacity: '0.5' }
+        ]);
+
+      const animation = createAnimation()
+        .duration(2000)
+        .iterations(Infinity)
+        .addAnimation([squareA, squareB, squareC])
+
+      document.querySelector('#play').addEventListener('click', () => {
+        animation.play();
+      });
+
+      document.querySelector('#pause').addEventListener('click', () => {
+        animation.pause();
+      });
+
+      document.querySelector('#stop').addEventListener('click', () => {
+        animation.stop();
+      });
+    </script>
+
+    <style>
+      .container {
+        flex-direction: column;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="container">
+      <ion-card class="card-a">
+        <ion-card-content>Card 1</ion-card-content>
+      </ion-card>
+
+      <ion-card class="card-b">
+        <ion-card-content>Card 2</ion-card-content>
+      </ion-card>
+
+      <ion-card class="card-c">
+        <ion-card-content>Card 2</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/group/index.md b/static/usage/v7/animations/group/index.md
new file mode 100644
index 00000000000..5d312219efa
--- /dev/null
+++ b/static/usage/v7/animations/group/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/group/demo.html"
+  devicePreview={true}
+/>
diff --git a/static/usage/v7/animations/group/javascript.md b/static/usage/v7/animations/group/javascript.md
new file mode 100644
index 00000000000..6773c61c135
--- /dev/null
+++ b/static/usage/v7/animations/group/javascript.md
@@ -0,0 +1,49 @@
+```html
+<ion-card class="card-a">
+  <ion-card-content>Card 1</ion-card-content>
+</ion-card>
+
+<ion-card class="card-b">
+  <ion-card-content>Card 2</ion-card-content>
+</ion-card>
+
+<ion-card class="card-c">
+  <ion-card-content>Card 2</ion-card-content>
+</ion-card>
+
+<ion-button id="play" onclick="animation.play()">Play</ion-button>
+<ion-button id="pause" onclick="animation.pause()">Pause</ion-button>
+<ion-button id="stop" onclick="animation.stop()">Stop</ion-button>
+
+<script>
+  const squareA = createAnimation()
+    .addElement(document.querySelector('.card-a'))
+    .keyframes([
+      { offset: 0, transform: 'scale(1) rotate(0)' },
+      { offset: 0.5, transform: 'scale(1.5) rotate(45deg)' },
+      { offset: 1, transform: 'scale(1) rotate(0) '}
+    ]);
+  
+  const squareB = createAnimation()
+    .addElement(document.querySelector('.card-b'))
+    .keyframes([
+      { offset: 0, transform: 'scale(1)', opacity: '1' },
+      { offset: 0.5, transform: 'scale(1.5)', opacity: '0.3' },
+      { offset: 1, transform: 'scale(1)', opacity: '1' }
+    ]);
+  
+  const squareC = createAnimation()
+    .addElement(document.querySelector('.card-c'))
+    .duration(5000)
+    .keyframes([
+      { offset: 0, transform: 'scale(1)', opacity: '0.5' },
+      { offset: 0.5, transform: 'scale(0.5)', opacity: '1' },
+      { offset: 1, transform: 'scale(1)', opacity: '0.5' }
+    ]);
+  
+  var animation = createAnimation()
+    .duration(2000)
+    .iterations(Infinity)
+    .addAnimation([squareA, squareB, squareC])
+</script>
+```
diff --git a/static/usage/v7/animations/group/react.md b/static/usage/v7/animations/group/react.md
new file mode 100644
index 00000000000..730881c49a9
--- /dev/null
+++ b/static/usage/v7/animations/group/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/group/vue.md b/static/usage/v7/animations/group/vue.md
new file mode 100644
index 00000000000..82c05ba66e6
--- /dev/null
+++ b/static/usage/v7/animations/group/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>
+```

From 02a5381e373e04c5613ace982e124d2051ca8899 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 10 Jul 2023 12:35:28 -0400
Subject: [PATCH 02/13] us IDs

---
 static/usage/v7/animations/group/demo.html     | 12 ++++++------
 static/usage/v7/animations/group/javascript.md | 12 ++++++------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/static/usage/v7/animations/group/demo.html b/static/usage/v7/animations/group/demo.html
index afc81b2df8d..0f556644a84 100644
--- a/static/usage/v7/animations/group/demo.html
+++ b/static/usage/v7/animations/group/demo.html
@@ -13,7 +13,7 @@
       window.createAnimation = createAnimation;
 
       const squareA = createAnimation()
-        .addElement(document.querySelector('.card-a'))
+        .addElement(document.querySelector('#card-a'))
         .keyframes([
           { offset: 0, transform: 'scale(1) rotate(0)' },
           { offset: 0.5, transform: 'scale(1.5) rotate(45deg)' },
@@ -21,7 +21,7 @@
         ]);
 
       const squareB = createAnimation()
-        .addElement(document.querySelector('.card-b'))
+        .addElement(document.querySelector('#card-b'))
         .keyframes([
           { offset: 0, transform: 'scale(1)', opacity: '1' },
           { offset: 0.5, transform: 'scale(1.5)', opacity: '0.3' },
@@ -29,7 +29,7 @@
         ]);
 
       const squareC = createAnimation()
-        .addElement(document.querySelector('.card-c'))
+        .addElement(document.querySelector('#card-c'))
         .duration(5000)
         .keyframes([
           { offset: 0, transform: 'scale(1)', opacity: '0.5' },
@@ -64,15 +64,15 @@
 
   <body>
     <div class="container">
-      <ion-card class="card-a">
+      <ion-card id="card-a">
         <ion-card-content>Card 1</ion-card-content>
       </ion-card>
 
-      <ion-card class="card-b">
+      <ion-card id="card-b">
         <ion-card-content>Card 2</ion-card-content>
       </ion-card>
 
-      <ion-card class="card-c">
+      <ion-card id="card-c">
         <ion-card-content>Card 2</ion-card-content>
       </ion-card>
 
diff --git a/static/usage/v7/animations/group/javascript.md b/static/usage/v7/animations/group/javascript.md
index 6773c61c135..041fde996f1 100644
--- a/static/usage/v7/animations/group/javascript.md
+++ b/static/usage/v7/animations/group/javascript.md
@@ -1,13 +1,13 @@
 ```html
-<ion-card class="card-a">
+<ion-card id="card-a">
   <ion-card-content>Card 1</ion-card-content>
 </ion-card>
 
-<ion-card class="card-b">
+<ion-card id="card-b">
   <ion-card-content>Card 2</ion-card-content>
 </ion-card>
 
-<ion-card class="card-c">
+<ion-card id="card-c">
   <ion-card-content>Card 2</ion-card-content>
 </ion-card>
 
@@ -17,7 +17,7 @@
 
 <script>
   const squareA = createAnimation()
-    .addElement(document.querySelector('.card-a'))
+    .addElement(document.querySelector('#card-a'))
     .keyframes([
       { offset: 0, transform: 'scale(1) rotate(0)' },
       { offset: 0.5, transform: 'scale(1.5) rotate(45deg)' },
@@ -25,7 +25,7 @@
     ]);
   
   const squareB = createAnimation()
-    .addElement(document.querySelector('.card-b'))
+    .addElement(document.querySelector('#card-b'))
     .keyframes([
       { offset: 0, transform: 'scale(1)', opacity: '1' },
       { offset: 0.5, transform: 'scale(1.5)', opacity: '0.3' },
@@ -33,7 +33,7 @@
     ]);
   
   const squareC = createAnimation()
-    .addElement(document.querySelector('.card-c'))
+    .addElement(document.querySelector('#card-c'))
     .duration(5000)
     .keyframes([
       { offset: 0, transform: 'scale(1)', opacity: '0.5' },

From 2ca3ec016858f7c7c122b8099ed9f73bfadc4709 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 10 Jul 2023 12:37:05 -0400
Subject: [PATCH 03/13] typo

---
 static/usage/v7/animations/group/demo.html     | 8 ++++----
 static/usage/v7/animations/group/javascript.md | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/static/usage/v7/animations/group/demo.html b/static/usage/v7/animations/group/demo.html
index 0f556644a84..85052caff8b 100644
--- a/static/usage/v7/animations/group/demo.html
+++ b/static/usage/v7/animations/group/demo.html
@@ -12,7 +12,7 @@
       import { createAnimation } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/index.esm.js';
       window.createAnimation = createAnimation;
 
-      const squareA = createAnimation()
+      const cardA = createAnimation()
         .addElement(document.querySelector('#card-a'))
         .keyframes([
           { offset: 0, transform: 'scale(1) rotate(0)' },
@@ -20,7 +20,7 @@
           { offset: 1, transform: 'scale(1) rotate(0) '}
         ]);
 
-      const squareB = createAnimation()
+      const cardB = createAnimation()
         .addElement(document.querySelector('#card-b'))
         .keyframes([
           { offset: 0, transform: 'scale(1)', opacity: '1' },
@@ -28,7 +28,7 @@
           { offset: 1, transform: 'scale(1)', opacity: '1' }
         ]);
 
-      const squareC = createAnimation()
+      const cardC = createAnimation()
         .addElement(document.querySelector('#card-c'))
         .duration(5000)
         .keyframes([
@@ -40,7 +40,7 @@
       const animation = createAnimation()
         .duration(2000)
         .iterations(Infinity)
-        .addAnimation([squareA, squareB, squareC])
+        .addAnimation([cardA, cardB, cardC])
 
       document.querySelector('#play').addEventListener('click', () => {
         animation.play();
diff --git a/static/usage/v7/animations/group/javascript.md b/static/usage/v7/animations/group/javascript.md
index 041fde996f1..c7b83f05555 100644
--- a/static/usage/v7/animations/group/javascript.md
+++ b/static/usage/v7/animations/group/javascript.md
@@ -16,7 +16,7 @@
 <ion-button id="stop" onclick="animation.stop()">Stop</ion-button>
 
 <script>
-  const squareA = createAnimation()
+  const cardA = createAnimation()
     .addElement(document.querySelector('#card-a'))
     .keyframes([
       { offset: 0, transform: 'scale(1) rotate(0)' },
@@ -24,7 +24,7 @@
       { offset: 1, transform: 'scale(1) rotate(0) '}
     ]);
   
-  const squareB = createAnimation()
+  const cardB = createAnimation()
     .addElement(document.querySelector('#card-b'))
     .keyframes([
       { offset: 0, transform: 'scale(1)', opacity: '1' },
@@ -32,7 +32,7 @@
       { offset: 1, transform: 'scale(1)', opacity: '1' }
     ]);
   
-  const squareC = createAnimation()
+  const cardC = createAnimation()
     .addElement(document.querySelector('#card-c'))
     .duration(5000)
     .keyframes([
@@ -44,6 +44,6 @@
   var animation = createAnimation()
     .duration(2000)
     .iterations(Infinity)
-    .addAnimation([squareA, squareB, squareC])
+    .addAnimation([cardA, cardB, cardC])
 </script>
 ```

From bcb68cd6577dd1e689654b939144e5366a92c2a0 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 10 Jul 2023 12:55:31 -0400
Subject: [PATCH 04/13] add angular example

---
 .../group/angular/example_component_html.md   | 36 ++++----
 .../group/angular/example_component_ts.md     | 84 +++++++++++--------
 2 files changed, 62 insertions(+), 58 deletions(-)

diff --git a/static/usage/v7/animations/group/angular/example_component_html.md b/static/usage/v7/animations/group/angular/example_component_html.md
index 178ae34c17b..81005d01806 100644
--- a/static/usage/v7/animations/group/angular/example_component_html.md
+++ b/static/usage/v7/animations/group/angular/example_component_html.md
@@ -1,23 +1,17 @@
 ```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>
+<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 2</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/group/angular/example_component_ts.md b/static/usage/v7/animations/group/angular/example_component_ts.md
index b1fe997c1d4..804dfef3d31 100644
--- a/static/usage/v7/animations/group/angular/example_component_ts.md
+++ b/static/usage/v7/animations/group/angular/example_component_ts.md
@@ -1,52 +1,62 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
-import type { IonModal } from '@ionic/angular';
-import { AnimationController } from '@ionic/angular';
+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 {
-  @ViewChild('modal', { static: true }) modal: IonModal;
+  @ViewChildren(IonCard) cardElements: QueryList<any>;
+  
+  private animation: Animation;
 
   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;
+  ngAfterViewInit() {
+    const cardA = this.animationCtrl.create()
+      .addElement(this.cardElements.get(0).el)
+      .keyframes([
+        { offset: 0, transform: 'scale(1) rotate(0)' },
+        { offset: 0.5, transform: 'scale(1.5) rotate(45deg)' },
+        { offset: 1, transform: 'scale(1) rotate(0) '}
+      ]);
+    
+    const cardB = this.animationCtrl.create()
+      .addElement(this.cardElements.get(1).el)
+      .keyframes([
+        { offset: 0, transform: 'scale(1)', opacity: '1' },
+        { offset: 0.5, transform: 'scale(1.5)', opacity: '0.3' },
+        { offset: 1, transform: 'scale(1)', opacity: '1' }
+      ]);
+    
+    const cardC = this.animationCtrl.create()
+      .addElement(this.cardElements.get(2).el)
+      .duration(5000)
+      .keyframes([
+        { offset: 0, transform: 'scale(1)', opacity: '0.5' },
+        { offset: 0.5, transform: 'scale(0.5)', opacity: '1' },
+        { offset: 1, transform: 'scale(1)', opacity: '0.5' }
+      ]);
+    
+    this.animation = this.animationCtrl.create()
+      .duration(2000)
+      .iterations(Infinity)
+      .addAnimation([cardA, cardB, cardC]);
   }
-
-  closeModal() {
-    this.modal.dismiss();
+  
+  play() {
+    this.animation.play();
+  }
+  
+  pause() {
+    this.animation.pause();
+  }
+  
+  stop() {
+    this.animation.stop();
   }
 }
 ```

From 034e0b032921fb82fdb4fb02597d950ab13535cd Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 10 Jul 2023 12:55:45 -0400
Subject: [PATCH 05/13] typo

---
 .../usage/v7/animations/group/angular/example_component_ts.md   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/usage/v7/animations/group/angular/example_component_ts.md b/static/usage/v7/animations/group/angular/example_component_ts.md
index 804dfef3d31..970daccf49b 100644
--- a/static/usage/v7/animations/group/angular/example_component_ts.md
+++ b/static/usage/v7/animations/group/angular/example_component_ts.md
@@ -1,5 +1,5 @@
 ```ts
-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChildren } from '@angular/core';
 import type { QueryList } from '@angular/core';
 import type { Animation } from '@ionic/angular';
 import { AnimationController, IonCard } from '@ionic/angular';

From c632748ff6df08c7d9de00d5c42d2294cb7c92bd Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 10 Jul 2023 12:56:16 -0400
Subject: [PATCH 06/13] another typo

---
 .../usage/v7/animations/group/angular/example_component_html.md | 2 +-
 static/usage/v7/animations/group/demo.html                      | 2 +-
 static/usage/v7/animations/group/javascript.md                  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/static/usage/v7/animations/group/angular/example_component_html.md b/static/usage/v7/animations/group/angular/example_component_html.md
index 81005d01806..bb61611b10c 100644
--- a/static/usage/v7/animations/group/angular/example_component_html.md
+++ b/static/usage/v7/animations/group/angular/example_component_html.md
@@ -8,7 +8,7 @@
 </ion-card>
 
 <ion-card>
-  <ion-card-content>Card 2</ion-card-content>
+  <ion-card-content>Card 3</ion-card-content>
 </ion-card>
 
 <ion-button id="play" (click)="play()">Play</ion-button>
diff --git a/static/usage/v7/animations/group/demo.html b/static/usage/v7/animations/group/demo.html
index 85052caff8b..aa03ecf42ab 100644
--- a/static/usage/v7/animations/group/demo.html
+++ b/static/usage/v7/animations/group/demo.html
@@ -73,7 +73,7 @@
       </ion-card>
 
       <ion-card id="card-c">
-        <ion-card-content>Card 2</ion-card-content>
+        <ion-card-content>Card 3</ion-card-content>
       </ion-card>
 
       <div>
diff --git a/static/usage/v7/animations/group/javascript.md b/static/usage/v7/animations/group/javascript.md
index c7b83f05555..2b7f838fd84 100644
--- a/static/usage/v7/animations/group/javascript.md
+++ b/static/usage/v7/animations/group/javascript.md
@@ -8,7 +8,7 @@
 </ion-card>
 
 <ion-card id="card-c">
-  <ion-card-content>Card 2</ion-card-content>
+  <ion-card-content>Card 3</ion-card-content>
 </ion-card>
 
 <ion-button id="play" onclick="animation.play()">Play</ion-button>

From 30c0c1b4d8f74d2f190d966800ffef3300357b43 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 10 Jul 2023 13:25:58 -0400
Subject: [PATCH 07/13] clean up angular example

---
 .../animations/group/angular/example_component_ts.md   | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/static/usage/v7/animations/group/angular/example_component_ts.md b/static/usage/v7/animations/group/angular/example_component_ts.md
index 970daccf49b..d4da3d2b244 100644
--- a/static/usage/v7/animations/group/angular/example_component_ts.md
+++ b/static/usage/v7/animations/group/angular/example_component_ts.md
@@ -1,5 +1,5 @@
 ```ts
-import { Component, ViewChildren } from '@angular/core';
+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';
@@ -9,7 +9,7 @@ import { AnimationController, IonCard } from '@ionic/angular';
   templateUrl: 'example.component.html',
 })
 export class ExampleComponent {
-  @ViewChildren(IonCard) cardElements: QueryList<any>;
+  @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList<ElementRef<HTMLIonCardElement>>;
   
   private animation: Animation;
 
@@ -17,7 +17,7 @@ export class ExampleComponent {
 
   ngAfterViewInit() {
     const cardA = this.animationCtrl.create()
-      .addElement(this.cardElements.get(0).el)
+      .addElement(this.cardElements.get(0).nativeElement)
       .keyframes([
         { offset: 0, transform: 'scale(1) rotate(0)' },
         { offset: 0.5, transform: 'scale(1.5) rotate(45deg)' },
@@ -25,7 +25,7 @@ export class ExampleComponent {
       ]);
     
     const cardB = this.animationCtrl.create()
-      .addElement(this.cardElements.get(1).el)
+      .addElement(this.cardElements.get(1).nativeElement)
       .keyframes([
         { offset: 0, transform: 'scale(1)', opacity: '1' },
         { offset: 0.5, transform: 'scale(1.5)', opacity: '0.3' },
@@ -33,7 +33,7 @@ export class ExampleComponent {
       ]);
     
     const cardC = this.animationCtrl.create()
-      .addElement(this.cardElements.get(2).el)
+      .addElement(this.cardElements.get(2).nativeElement)
       .duration(5000)
       .keyframes([
         { offset: 0, transform: 'scale(1)', opacity: '0.5' },

From ec1c8e215bacc4e1709d7a37282a2549fd6add72 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 10 Jul 2023 15:16:42 -0400
Subject: [PATCH 08/13] add vue demo

---
 static/usage/v7/animations/group/vue.md | 125 ++++++++++++------------
 1 file changed, 63 insertions(+), 62 deletions(-)

diff --git a/static/usage/v7/animations/group/vue.md b/static/usage/v7/animations/group/vue.md
index 82c05ba66e6..9625fa76395 100644
--- a/static/usage/v7/animations/group/vue.md
+++ b/static/usage/v7/animations/group/vue.md
@@ -1,88 +1,89 @@
 ```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>
+  <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,
-    IonButtons,
-    IonContent,
-    IonHeader,
-    IonModal,
-    IonToolbar,
-    IonTitle,
+    IonCard,
+    IonCardContent,
     createAnimation,
   } from '@ionic/vue';
+  import type { Animation } from '@ionic/vue';
 
-  import { defineComponent, ref } from 'vue';
+  import { defineComponent, ref, onMounted } from 'vue';
 
   export default defineComponent({
     components: {
       IonButton,
-      IonButtons,
-      IonContent,
-      IonHeader,
-      IonModal,
-      IonToolbar,
-      IonTitle,
+    IonCard,
+    IonCardContent,
     },
     setup() {
-      const modalEl = ref(null);
+      const cardAEl = ref(null);
+      const cardBEl = ref(null);
+      const cardCEl = ref(null);
 
-      const enterAnimation = (baseEl: HTMLElement) => {
-        const root = baseEl.shadowRoot;
+      let animation: Animation;
 
-        const backdropAnimation = createAnimation()
-          .addElement(root!.querySelector('ion-backdrop')!)
-          .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
-
-        const wrapperAnimation = createAnimation()
-          .addElement(root!.querySelector('.modal-wrapper')!)
+      onMounted(() => {
+        const cardA = createAnimation()
+          .addElement(cardAEl.value.$el)
           .keyframes([
-            { offset: 0, opacity: '0', transform: 'scale(0)' },
-            { offset: 1, opacity: '0.99', transform: 'scale(1)' },
+            { offset: 0, transform: 'scale(1) rotate(0)' },
+            { offset: 0.5, transform: 'scale(1.5) rotate(45deg)' },
+            { offset: 1, transform: 'scale(1) rotate(0) '}
           ]);
+      
+        const cardB = createAnimation()
+          .addElement(cardBEl.value.$el)
+          .keyframes([
+            { offset: 0, transform: 'scale(1)', opacity: '1' },
+            { offset: 0.5, transform: 'scale(1.5)', opacity: '0.3' },
+            { offset: 1, transform: 'scale(1)', opacity: '1' }
+          ]);
+        
+        const cardC = createAnimation()
+          .addElement(cardCEl.value.$el)
+          .duration(5000)
+          .keyframes([
+            { offset: 0, transform: 'scale(1)', opacity: '0.5' },
+            { offset: 0.5, transform: 'scale(0.5)', opacity: '1' },
+            { offset: 1, transform: 'scale(1)', opacity: '0.5' }
+          ]);
+        
+        animation = createAnimation()
+          .duration(2000)
+          .iterations(Infinity)
+          .addAnimation([cardA, cardB, cardC])
+      });
 
-        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();
-      };
+      const play = () => animation.play();
+      const pause = () => animation.pause();
+      const stop = () => animation.stop();
 
       return {
-        close,
-        modalEl,
-        closeModal,
-        enterAnimation,
-        leaveAnimation,
+        play,
+        pause,
+        stop,
+        cardAEl,
+        cardBEl,
+        cardCEl
       };
     },
   });

From 49d9e1023b499a06c646350c77777e2479a29c73 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 10 Jul 2023 15:20:19 -0400
Subject: [PATCH 09/13] indent

---
 static/usage/v7/animations/group/vue.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/static/usage/v7/animations/group/vue.md b/static/usage/v7/animations/group/vue.md
index 9625fa76395..5a9ce97b493 100644
--- a/static/usage/v7/animations/group/vue.md
+++ b/static/usage/v7/animations/group/vue.md
@@ -31,8 +31,8 @@
   export default defineComponent({
     components: {
       IonButton,
-    IonCard,
-    IonCardContent,
+      IonCard,
+      IonCardContent,
     },
     setup() {
       const cardAEl = ref(null);

From 1b7ac139950aba8eb0165887355b5765a87b05c0 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 10 Jul 2023 15:33:21 -0400
Subject: [PATCH 10/13] add react demo

---
 static/usage/v7/animations/group/react.md | 116 ++++++++++++----------
 1 file changed, 61 insertions(+), 55 deletions(-)

diff --git a/static/usage/v7/animations/group/react.md b/static/usage/v7/animations/group/react.md
index 730881c49a9..29b5a5d084a 100644
--- a/static/usage/v7/animations/group/react.md
+++ b/static/usage/v7/animations/group/react.md
@@ -1,69 +1,75 @@
 ```tsx
-import React, { useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import {
   IonButton,
-  IonButtons,
-  IonContent,
-  IonHeader,
-  IonModal,
-  IonToolbar,
-  IonTitle,
+  IonCard,
+  IonCardContent,
   createAnimation,
 } from '@ionic/react';
+import type { Animation } from '@ionic/react';
 
 function Example() {
-  const modalEl = useRef<HTMLIonModalElement>(null);
+  const cardAEl = useRef<HTMLIonCardElement | null>(null);
+  const cardBEl = useRef<HTMLIonCardElement | null>(null);
+  const cardCEl = useRef<HTMLIonCardElement | null>(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();
-  };
+  const animation = useRef<Animation | null>(null);
+  
+  useEffect(() => {
+    if (animation.current === null) {
+      const cardA = createAnimation()
+        .addElement(cardAEl.current!)
+        .keyframes([
+          { offset: 0, transform: 'scale(1) rotate(0)' },
+          { offset: 0.5, transform: 'scale(1.5) rotate(45deg)' },
+          { offset: 1, transform: 'scale(1) rotate(0) '}
+        ]);
+      
+      const cardB = createAnimation()
+        .addElement(cardBEl.current!)
+        .keyframes([
+          { offset: 0, transform: 'scale(1)', opacity: '1' },
+          { offset: 0.5, transform: 'scale(1.5)', opacity: '0.3' },
+          { offset: 1, transform: 'scale(1)', opacity: '1' }
+        ]);
+      
+      const cardC = createAnimation()
+        .addElement(cardCEl.current!)
+        .duration(5000)
+        .keyframes([
+          { offset: 0, transform: 'scale(1)', opacity: '0.5' },
+          { offset: 0.5, transform: 'scale(0.5)', opacity: '1' },
+          { offset: 1, transform: 'scale(1)', opacity: '0.5' }
+        ]);
+      
+      animation.current = createAnimation()
+        .duration(2000)
+        .iterations(Infinity)
+        .addAnimation([cardA, cardB, cardC])
+    }
+  }, [cardAEl, cardBEl, cardCEl]);
+  
+  const play = () => { animation.current?.play(); };
+  const pause = () => { animation.current?.pause(); };
+  const stop = () => { animation.current?.stop(); };
 
   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>
+      <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>
     </>
   );
 }

From b18f419a06733522ca637c11825b376fdfbc993c Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 10 Jul 2023 15:34:54 -0400
Subject: [PATCH 11/13] clean up demo

---
 static/usage/v7/animations/group/demo.html | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/static/usage/v7/animations/group/demo.html b/static/usage/v7/animations/group/demo.html
index aa03ecf42ab..3d08388dd44 100644
--- a/static/usage/v7/animations/group/demo.html
+++ b/static/usage/v7/animations/group/demo.html
@@ -59,6 +59,10 @@
       .container {
         flex-direction: column;
       }
+
+      ion-card {
+        width: 70%;
+      }
     </style>
   </head>
 

From 3cb20973ff7709daa1788751aa10d2273a93bc7d Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 11 Jul 2023 09:38:53 -0400
Subject: [PATCH 12/13] Update animations.md

---
 docs/utilities/animations.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/utilities/animations.md b/docs/utilities/animations.md
index 728426dd6ce..0a1e49c5fba 100644
--- a/docs/utilities/animations.md
+++ b/docs/utilities/animations.md
@@ -316,7 +316,7 @@ Each keyframe object contains an `offset` property. `offset` is a value between
 
 Multiple elements can be animated at the same time and controlled via a single parent animation object. Child animations inherit properties such as duration, easing, and iterations unless otherwise specified. A parent animation's `onFinish` callback will not be called until all child animations have completed.
 
-This example shows 3 child animations controlled by a single parent animation. Animations `squareA` and `squareB` inherit the parent animation's duration of 2000ms, but animation `squareC` has a duration of 5000ms since it was explicitly set.
+This example shows 3 child animations controlled by a single parent animation. Animations `cardA` and `cardB` inherit the parent animation's duration of 2000ms, but animation `cardC` has a duration of 5000ms since it was explicitly set.
 
 import Group from '@site/static/usage/v7/animations/group/index.md';
 

From affe1d6ecaf9a59a85c77efc72ab0b348db867bf Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 11 Jul 2023 10:46:26 -0400
Subject: [PATCH 13/13] lint

---
 .../group/angular/example_component_ts.md     | 32 +++++-----
 static/usage/v7/animations/group/demo.html    | 12 ++--
 .../usage/v7/animations/group/javascript.md   | 17 +++---
 static/usage/v7/animations/group/react.md     | 58 ++++++++++---------
 static/usage/v7/animations/group/vue.md       | 32 ++++------
 5 files changed, 72 insertions(+), 79 deletions(-)

diff --git a/static/usage/v7/animations/group/angular/example_component_ts.md b/static/usage/v7/animations/group/angular/example_component_ts.md
index d4da3d2b244..63f7a7b2f7a 100644
--- a/static/usage/v7/animations/group/angular/example_component_ts.md
+++ b/static/usage/v7/animations/group/angular/example_component_ts.md
@@ -10,51 +10,55 @@ import { AnimationController, IonCard } from '@ionic/angular';
 })
 export class ExampleComponent {
   @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList<ElementRef<HTMLIonCardElement>>;
-  
+
   private animation: Animation;
 
   constructor(private animationCtrl: AnimationController) {}
 
   ngAfterViewInit() {
-    const cardA = this.animationCtrl.create()
+    const cardA = this.animationCtrl
+      .create()
       .addElement(this.cardElements.get(0).nativeElement)
       .keyframes([
         { offset: 0, transform: 'scale(1) rotate(0)' },
         { offset: 0.5, transform: 'scale(1.5) rotate(45deg)' },
-        { offset: 1, transform: 'scale(1) rotate(0) '}
+        { offset: 1, transform: 'scale(1) rotate(0) ' },
       ]);
-    
-    const cardB = this.animationCtrl.create()
+
+    const cardB = this.animationCtrl
+      .create()
       .addElement(this.cardElements.get(1).nativeElement)
       .keyframes([
         { offset: 0, transform: 'scale(1)', opacity: '1' },
         { offset: 0.5, transform: 'scale(1.5)', opacity: '0.3' },
-        { offset: 1, transform: 'scale(1)', opacity: '1' }
+        { offset: 1, transform: 'scale(1)', opacity: '1' },
       ]);
-    
-    const cardC = this.animationCtrl.create()
+
+    const cardC = this.animationCtrl
+      .create()
       .addElement(this.cardElements.get(2).nativeElement)
       .duration(5000)
       .keyframes([
         { offset: 0, transform: 'scale(1)', opacity: '0.5' },
         { offset: 0.5, transform: 'scale(0.5)', opacity: '1' },
-        { offset: 1, transform: 'scale(1)', opacity: '0.5' }
+        { offset: 1, transform: 'scale(1)', opacity: '0.5' },
       ]);
-    
-    this.animation = this.animationCtrl.create()
+
+    this.animation = this.animationCtrl
+      .create()
       .duration(2000)
       .iterations(Infinity)
       .addAnimation([cardA, cardB, cardC]);
   }
-  
+
   play() {
     this.animation.play();
   }
-  
+
   pause() {
     this.animation.pause();
   }
-  
+
   stop() {
     this.animation.stop();
   }
diff --git a/static/usage/v7/animations/group/demo.html b/static/usage/v7/animations/group/demo.html
index 3d08388dd44..36a7b847c5d 100644
--- a/static/usage/v7/animations/group/demo.html
+++ b/static/usage/v7/animations/group/demo.html
@@ -17,7 +17,7 @@
         .keyframes([
           { offset: 0, transform: 'scale(1) rotate(0)' },
           { offset: 0.5, transform: 'scale(1.5) rotate(45deg)' },
-          { offset: 1, transform: 'scale(1) rotate(0) '}
+          { offset: 1, transform: 'scale(1) rotate(0) ' },
         ]);
 
       const cardB = createAnimation()
@@ -25,7 +25,7 @@
         .keyframes([
           { offset: 0, transform: 'scale(1)', opacity: '1' },
           { offset: 0.5, transform: 'scale(1.5)', opacity: '0.3' },
-          { offset: 1, transform: 'scale(1)', opacity: '1' }
+          { offset: 1, transform: 'scale(1)', opacity: '1' },
         ]);
 
       const cardC = createAnimation()
@@ -34,13 +34,10 @@
         .keyframes([
           { offset: 0, transform: 'scale(1)', opacity: '0.5' },
           { offset: 0.5, transform: 'scale(0.5)', opacity: '1' },
-          { offset: 1, transform: 'scale(1)', opacity: '0.5' }
+          { offset: 1, transform: 'scale(1)', opacity: '0.5' },
         ]);
 
-      const animation = createAnimation()
-        .duration(2000)
-        .iterations(Infinity)
-        .addAnimation([cardA, cardB, cardC])
+      const animation = createAnimation().duration(2000).iterations(Infinity).addAnimation([cardA, cardB, cardC]);
 
       document.querySelector('#play').addEventListener('click', () => {
         animation.play();
@@ -86,6 +83,5 @@
         <ion-button id="stop">Stop</ion-button>
       </div>
     </div>
-
   </body>
 </html>
diff --git a/static/usage/v7/animations/group/javascript.md b/static/usage/v7/animations/group/javascript.md
index 2b7f838fd84..d6f671660e2 100644
--- a/static/usage/v7/animations/group/javascript.md
+++ b/static/usage/v7/animations/group/javascript.md
@@ -21,29 +21,26 @@
     .keyframes([
       { offset: 0, transform: 'scale(1) rotate(0)' },
       { offset: 0.5, transform: 'scale(1.5) rotate(45deg)' },
-      { offset: 1, transform: 'scale(1) rotate(0) '}
+      { offset: 1, transform: 'scale(1) rotate(0) ' },
     ]);
-  
+
   const cardB = createAnimation()
     .addElement(document.querySelector('#card-b'))
     .keyframes([
       { offset: 0, transform: 'scale(1)', opacity: '1' },
       { offset: 0.5, transform: 'scale(1.5)', opacity: '0.3' },
-      { offset: 1, transform: 'scale(1)', opacity: '1' }
+      { offset: 1, transform: 'scale(1)', opacity: '1' },
     ]);
-  
+
   const cardC = createAnimation()
     .addElement(document.querySelector('#card-c'))
     .duration(5000)
     .keyframes([
       { offset: 0, transform: 'scale(1)', opacity: '0.5' },
       { offset: 0.5, transform: 'scale(0.5)', opacity: '1' },
-      { offset: 1, transform: 'scale(1)', opacity: '0.5' }
+      { offset: 1, transform: 'scale(1)', opacity: '0.5' },
     ]);
-  
-  var animation = createAnimation()
-    .duration(2000)
-    .iterations(Infinity)
-    .addAnimation([cardA, cardB, cardC])
+
+  var animation = createAnimation().duration(2000).iterations(Infinity).addAnimation([cardA, cardB, cardC]);
 </script>
 ```
diff --git a/static/usage/v7/animations/group/react.md b/static/usage/v7/animations/group/react.md
index 29b5a5d084a..23b00bbee74 100644
--- a/static/usage/v7/animations/group/react.md
+++ b/static/usage/v7/animations/group/react.md
@@ -1,11 +1,6 @@
 ```tsx
 import React, { useEffect, useRef } from 'react';
-import {
-  IonButton,
-  IonCard,
-  IonCardContent,
-  createAnimation,
-} from '@ionic/react';
+import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/react';
 import type { Animation } from '@ionic/react';
 
 function Example() {
@@ -14,7 +9,7 @@ function Example() {
   const cardCEl = useRef<HTMLIonCardElement | null>(null);
 
   const animation = useRef<Animation | null>(null);
-  
+
   useEffect(() => {
     if (animation.current === null) {
       const cardA = createAnimation()
@@ -22,54 +17,63 @@ function Example() {
         .keyframes([
           { offset: 0, transform: 'scale(1) rotate(0)' },
           { offset: 0.5, transform: 'scale(1.5) rotate(45deg)' },
-          { offset: 1, transform: 'scale(1) rotate(0) '}
+          { offset: 1, transform: 'scale(1) rotate(0) ' },
         ]);
-      
+
       const cardB = createAnimation()
         .addElement(cardBEl.current!)
         .keyframes([
           { offset: 0, transform: 'scale(1)', opacity: '1' },
           { offset: 0.5, transform: 'scale(1.5)', opacity: '0.3' },
-          { offset: 1, transform: 'scale(1)', opacity: '1' }
+          { offset: 1, transform: 'scale(1)', opacity: '1' },
         ]);
-      
+
       const cardC = createAnimation()
         .addElement(cardCEl.current!)
         .duration(5000)
         .keyframes([
           { offset: 0, transform: 'scale(1)', opacity: '0.5' },
           { offset: 0.5, transform: 'scale(0.5)', opacity: '1' },
-          { offset: 1, transform: 'scale(1)', opacity: '0.5' }
+          { offset: 1, transform: 'scale(1)', opacity: '0.5' },
         ]);
-      
-      animation.current = createAnimation()
-        .duration(2000)
-        .iterations(Infinity)
-        .addAnimation([cardA, cardB, cardC])
+
+      animation.current = createAnimation().duration(2000).iterations(Infinity).addAnimation([cardA, cardB, cardC]);
     }
   }, [cardAEl, cardBEl, cardCEl]);
-  
-  const play = () => { animation.current?.play(); };
-  const pause = () => { animation.current?.pause(); };
-  const stop = () => { animation.current?.stop(); };
+
+  const play = () => {
+    animation.current?.play();
+  };
+  const pause = () => {
+    animation.current?.pause();
+  };
+  const stop = () => {
+    animation.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>
+
+      <IonButton id="play" onClick={play}>
+        Play
+      </IonButton>
+      <IonButton id="pause" onClick={pause}>
+        Pause
+      </IonButton>
+      <IonButton id="stop" onClick={stop}>
+        Stop
+      </IonButton>
     </>
   );
 }
diff --git a/static/usage/v7/animations/group/vue.md b/static/usage/v7/animations/group/vue.md
index 5a9ce97b493..4302f414bb6 100644
--- a/static/usage/v7/animations/group/vue.md
+++ b/static/usage/v7/animations/group/vue.md
@@ -3,27 +3,22 @@
   <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 { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/vue';
   import type { Animation } from '@ionic/vue';
 
   import { defineComponent, ref, onMounted } from 'vue';
@@ -47,30 +42,27 @@
           .keyframes([
             { offset: 0, transform: 'scale(1) rotate(0)' },
             { offset: 0.5, transform: 'scale(1.5) rotate(45deg)' },
-            { offset: 1, transform: 'scale(1) rotate(0) '}
+            { offset: 1, transform: 'scale(1) rotate(0) ' },
           ]);
-      
+
         const cardB = createAnimation()
           .addElement(cardBEl.value.$el)
           .keyframes([
             { offset: 0, transform: 'scale(1)', opacity: '1' },
             { offset: 0.5, transform: 'scale(1.5)', opacity: '0.3' },
-            { offset: 1, transform: 'scale(1)', opacity: '1' }
+            { offset: 1, transform: 'scale(1)', opacity: '1' },
           ]);
-        
+
         const cardC = createAnimation()
           .addElement(cardCEl.value.$el)
           .duration(5000)
           .keyframes([
             { offset: 0, transform: 'scale(1)', opacity: '0.5' },
             { offset: 0.5, transform: 'scale(0.5)', opacity: '1' },
-            { offset: 1, transform: 'scale(1)', opacity: '0.5' }
+            { offset: 1, transform: 'scale(1)', opacity: '0.5' },
           ]);
-        
-        animation = createAnimation()
-          .duration(2000)
-          .iterations(Infinity)
-          .addAnimation([cardA, cardB, cardC])
+
+        animation = createAnimation().duration(2000).iterations(Infinity).addAnimation([cardA, cardB, cardC]);
       });
 
       const play = () => animation.play();
@@ -83,7 +75,7 @@
         stop,
         cardAEl,
         cardBEl,
-        cardCEl
+        cardCEl,
       };
     },
   });