From d6b9543a95957a5100e59b190415c04cd1fd4e12 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Tue, 11 Jul 2023 17:59:51 -0400
Subject: [PATCH 1/4] docs(animations): add playground for before and after
 hooks

---
 docs/utilities/animations.md                  | 113 +-----------------
 .../angular/example_component_html.md         |   9 ++
 .../angular/example_component_ts.md           |  55 +++++++++
 .../before-and-after-hooks/demo.html          |  74 ++++++++++++
 .../before-and-after-hooks/index.md           |  25 ++++
 .../before-and-after-hooks/javascript.md      |  40 +++++++
 .../before-and-after-hooks/react.md           |  61 ++++++++++
 .../animations/before-and-after-hooks/vue.md  |  67 +++++++++++
 8 files changed, 335 insertions(+), 109 deletions(-)
 create mode 100644 static/usage/v7/animations/before-and-after-hooks/angular/example_component_html.md
 create mode 100644 static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md
 create mode 100644 static/usage/v7/animations/before-and-after-hooks/demo.html
 create mode 100644 static/usage/v7/animations/before-and-after-hooks/index.md
 create mode 100644 static/usage/v7/animations/before-and-after-hooks/javascript.md
 create mode 100644 static/usage/v7/animations/before-and-after-hooks/react.md
 create mode 100644 static/usage/v7/animations/before-and-after-hooks/vue.md

diff --git a/docs/utilities/animations.md b/docs/utilities/animations.md
index 3ebcddb2835..24fdb3e0fc8 100644
--- a/docs/utilities/animations.md
+++ b/docs/utilities/animations.md
@@ -326,118 +326,13 @@ import Group from '@site/static/usage/v7/animations/group/index.md';
 
 Ionic Animations provides hooks that let you alter an element before an animation runs and after an animation completes. These hooks can be used to perform DOM reads and writes as well as add or remove classes and inline styles.
 
-### 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
-createAnimation()
-  .addElement(document.querySelector('.square'))
-  .duration(2000)
-  .beforeStyles({
-    opacity: 0.2
-  })
-  .afterStyles({
-    background: 'rgba(0, 255, 0, 0.5)'
-  })
-  .afterClearStyles(['opacity'])
-  .keyframes([
-    { offset: 0, transform: 'scale(1)' },
-    { offset: 0.5, transform: 'scale(1.5)' },
-    { offset: 1, transform: 'scale(1)' }
-  ])
-```
-</TabItem>
-<TabItem value="angular">
-
-```javascript
-this.animationCtrl.create()
-  .addElement(this.square.nativeElement)
-  .duration(2000)
-  .beforeStyles({
-    opacity: 0.2
-  })
-  .afterStyles({
-    background: 'rgba(0, 255, 0, 0.5)'
-  })
-  .afterClearStyles(['opacity'])
-  .keyframes([
-    { offset: 0, transform: 'scale(1)' },
-    { offset: 0.5, transform: 'scale(1.5)' },
-    { offset: 1, transform: 'scale(1)' }
-  ])
-```
-</TabItem>
-<TabItem value="react">
-
-```tsx
-<CreateAnimation
-  duration={2000}
-  beforeStyles={{
-    opacity: 0.2
-  }}
-  afterStyles={{
-    background: 'rgba(0, 255, 0, 0.5)'
-  }}
-  afterClearStyles={['opacity']}
-  keyframes={[
-    { offset: 0, transform: 'scale(1)' },
-    { offset: 0.5, transform: 'scale(1.5)' },
-    { offset: 1, transform: 'scale(1)' }
-  ]}
->
-  ...
-</CreateAnimation>
-```
-</TabItem>
-<TabItem value="vue">
-
-```javascript
-import { createAnimation } from '@ionic/vue';
-import { ref } from 'vue';
-
-...
-
-const squareRef = ref();
-
-...
-
-createAnimation()
-  .addElement(squareRef.value)
-  .duration(2000)
-  .beforeStyles({
-    opacity: 0.2
-  })
-  .afterStyles({
-    background: 'rgba(0, 255, 0, 0.5)'
-  })
-  .afterClearStyles(['opacity'])
-  .keyframes([
-    { offset: 0, transform: 'scale(1)' },
-    { offset: 0.5, transform: 'scale(1.5)' },
-    { offset: 1, transform: 'scale(1)' }
-  ])
-```
-</TabItem>
-</Tabs>
-````
-
-In this example, an inline opacity of 0.2 is set on the `.square` element prior to the animation starting. Once the animation finishes, the background color of the element is set to `rgba(0, 255, 0, 0.5)`, and the inline opacity is cleared.
+This example sets an inline opacity of `0.2` on the card prior to the animation starting. Once the animation finishes, the background color of the element is set to `rgba(0, 255, 0, 0.5)`, and the inline opacity is cleared. The animation must be stopped in order to remove the background and play it with the opacity again.
 
 See [Methods](#methods) for a complete list of hooks.
 
-<Codepen user="ionic" slug="BaBxmwo" />
+import BeforeAndAfterHooks from '@site/static/usage/v7/animations/before-and-after-hooks/index.md';
+
+<BeforeAndAfterHooks />
 
 ## Chained Animations
 
diff --git a/static/usage/v7/animations/before-and-after-hooks/angular/example_component_html.md b/static/usage/v7/animations/before-and-after-hooks/angular/example_component_html.md
new file mode 100644
index 00000000000..c73e91cb471
--- /dev/null
+++ b/static/usage/v7/animations/before-and-after-hooks/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+<ion-card>
+  <ion-card-content>Card</ion-card-content>
+</ion-card>
+
+<ion-button (click)="play()">Play</ion-button>
+<ion-button (click)="pause()">Pause</ion-button>
+<ion-button (click)="stop()">Stop</ion-button>
+```
diff --git a/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md b/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md
new file mode 100644
index 00000000000..94b8eb1916b
--- /dev/null
+++ b/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md
@@ -0,0 +1,55 @@
+```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 animation: Animation;
+
+  constructor(private animationCtrl: AnimationController) {}
+
+  ngAfterViewInit() {
+    const card = this.animationCtrl
+      .create()
+      .addElement(this.cardElements.get(0).nativeElement)
+      .duration(2000)
+      .beforeStyles({
+        opacity: 0.2
+      })
+      .beforeClearStyles(['background'])
+      .afterStyles({
+        background: 'rgba(0, 255, 0, 0.5)'
+      })
+      .afterClearStyles(['opacity'])
+      .keyframes([
+        { offset: 0, transform: 'scale(1)' },
+        { offset: 0.5, transform: 'scale(1.5)' },
+        { offset: 1, transform: 'scale(1)' }
+      ])
+
+    this.animation = this.animationCtrl
+      .create()
+      .duration(2000)
+      .addAnimation([card]);
+  }
+
+  play() {
+    this.animation.play();
+  }
+
+  pause() {
+    this.animation.pause();
+  }
+
+  stop() {
+    this.animation.stop();
+  }
+}
+```
diff --git a/static/usage/v7/animations/before-and-after-hooks/demo.html b/static/usage/v7/animations/before-and-after-hooks/demo.html
new file mode 100644
index 00000000000..b76d61f78ae
--- /dev/null
+++ b/static/usage/v7/animations/before-and-after-hooks/demo.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Animations</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 card = createAnimation()
+        .addElement(document.querySelector('#card'))
+        .duration(2000)
+        .beforeStyles({
+          opacity: 0.2
+        })
+        .beforeClearStyles(['background'])
+        .afterStyles({
+          background: 'rgba(0, 255, 0, 0.5)'
+        })
+        .afterClearStyles(['opacity'])
+        .keyframes([
+          { offset: 0, transform: 'scale(1)' },
+          { offset: 0.5, transform: 'scale(1.5)' },
+          { offset: 1, transform: 'scale(1)' }
+        ]);
+
+      document.querySelector('#play').addEventListener('click', async () => {
+        await card.play();
+      });
+
+      document.querySelector('#pause').addEventListener('click', async () => {
+        await card.pause();
+      });
+
+      document.querySelector('#stop').addEventListener('click', async () => {
+        await card.stop();
+      });
+    </script>
+
+    <style>
+      .container {
+        flex-direction: column;
+      }
+
+      ion-card {
+        width: 70%;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-card id="card">
+            <ion-card-content>Card</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>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/animations/before-and-after-hooks/index.md b/static/usage/v7/animations/before-and-after-hooks/index.md
new file mode 100644
index 00000000000..187ef590f4b
--- /dev/null
+++ b/static/usage/v7/animations/before-and-after-hooks/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/before-and-after-hooks/demo.html"
+  devicePreview={true}
+/>
diff --git a/static/usage/v7/animations/before-and-after-hooks/javascript.md b/static/usage/v7/animations/before-and-after-hooks/javascript.md
new file mode 100644
index 00000000000..d535b707916
--- /dev/null
+++ b/static/usage/v7/animations/before-and-after-hooks/javascript.md
@@ -0,0 +1,40 @@
+```html
+<ion-card id="card">
+  <ion-card-content>Card</ion-card-content>
+</ion-card>
+
+<ion-button id="play">Play</ion-button>
+<ion-button id="pause">Pause</ion-button>
+<ion-button id="stop">Stop</ion-button>
+
+<script>
+  const card = createAnimation()
+    .addElement(document.querySelector('#card'))
+    .duration(2000)
+    .beforeStyles({
+      opacity: 0.2
+    })
+    .beforeClearStyles(['background'])
+    .afterStyles({
+      background: 'rgba(0, 255, 0, 0.5)'
+    })
+    .afterClearStyles(['opacity'])
+    .keyframes([
+      { offset: 0, transform: 'scale(1)' },
+      { offset: 0.5, transform: 'scale(1.5)' },
+      { offset: 1, transform: 'scale(1)' }
+    ]);
+
+  document.querySelector('#play').addEventListener('click', async () => {
+    await card.play();
+  });
+
+  document.querySelector('#pause').addEventListener('click', async () => {
+    await card.pause();
+  });
+
+  document.querySelector('#stop').addEventListener('click', async () => {
+    await card.stop();
+  });
+</script>
+```
diff --git a/static/usage/v7/animations/before-and-after-hooks/react.md b/static/usage/v7/animations/before-and-after-hooks/react.md
new file mode 100644
index 00000000000..26703345715
--- /dev/null
+++ b/static/usage/v7/animations/before-and-after-hooks/react.md
@@ -0,0 +1,61 @@
+```tsx
+import React, { useEffect, useRef } from 'react';
+import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/react';
+import type { Animation } from '@ionic/react';
+
+function Example() {
+  const cardEl = useRef<HTMLIonCardElement | null>(null);
+
+  const card = useRef<Animation>();
+
+  useEffect(() => {
+    if (!card.current) {
+      card.current = createAnimation()
+        .addElement(cardEl.current!)
+        .duration(2000)
+        .beforeStyles({
+          opacity: 0.2
+        })
+        .beforeClearStyles(['background'])
+        .afterStyles({
+          background: 'rgba(0, 255, 0, 0.5)'
+        })
+        .afterClearStyles(['opacity'])
+        .keyframes([
+          { offset: 0, transform: 'scale(1)' },
+          { offset: 0.5, transform: 'scale(1.5)' },
+          { offset: 1, transform: 'scale(1)' }
+        ]);
+    }
+  }, [cardEl]);
+
+  const play = async () => {
+    await card.current?.play();
+  };
+  const pause = () => {
+    card.current?.pause();
+  };
+  const stop = () => {
+    card.current?.stop();
+  };
+
+  return (
+    <>
+      <IonCard ref={cardEl}>
+        <IonCardContent>Card</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/before-and-after-hooks/vue.md b/static/usage/v7/animations/before-and-after-hooks/vue.md
new file mode 100644
index 00000000000..cf406264d30
--- /dev/null
+++ b/static/usage/v7/animations/before-and-after-hooks/vue.md
@@ -0,0 +1,67 @@
+```html
+<template>
+  <ion-card ref="cardEl">
+    <ion-card-content>Card</ion-card-content>
+  </ion-card>
+
+  <ion-button @click="play()">Play</ion-button>
+  <ion-button @click="pause()">Pause</ion-button>
+  <ion-button @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 cardEl = ref(null);
+
+      let card: Animation | undefined;
+
+      onMounted(() => {
+        card = createAnimation()
+          .addElement(cardEl.value.$el)
+          .duration(2000)
+          .beforeStyles({
+            opacity: 0.2
+          })
+          .beforeClearStyles(['background'])
+          .afterStyles({
+            background: 'rgba(0, 255, 0, 0.5)'
+          })
+          .afterClearStyles(['opacity'])
+          .keyframes([
+            { offset: 0, transform: 'scale(1)' },
+            { offset: 0.5, transform: 'scale(1.5)' },
+            { offset: 1, transform: 'scale(1)' }
+          ]);
+      });
+
+      const play = async () => {
+        await card.play();
+      };
+      const pause = () => {
+        card?.pause();
+      };
+      const stop = () => {
+        card?.stop();
+      };
+
+      return {
+        play,
+        pause,
+        stop,
+        cardEl,
+      };
+    },
+  });
+</script>
+```

From ec0cf861b4928bcc32094d56bf0559b5fc73abfa Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Wed, 12 Jul 2023 11:02:12 -0400
Subject: [PATCH 2/4] style: lint

---
 .../angular/example_component_ts.md                 | 13 +++++--------
 .../v7/animations/before-and-after-hooks/demo.html  |  6 +++---
 .../animations/before-and-after-hooks/javascript.md |  6 +++---
 .../v7/animations/before-and-after-hooks/react.md   |  6 +++---
 .../v7/animations/before-and-after-hooks/vue.md     |  6 +++---
 5 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md b/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md
index 94b8eb1916b..908757603e7 100644
--- a/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md
+++ b/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md
@@ -21,23 +21,20 @@ export class ExampleComponent {
       .addElement(this.cardElements.get(0).nativeElement)
       .duration(2000)
       .beforeStyles({
-        opacity: 0.2
+        opacity: 0.2,
       })
       .beforeClearStyles(['background'])
       .afterStyles({
-        background: 'rgba(0, 255, 0, 0.5)'
+        background: 'rgba(0, 255, 0, 0.5)',
       })
       .afterClearStyles(['opacity'])
       .keyframes([
         { offset: 0, transform: 'scale(1)' },
         { offset: 0.5, transform: 'scale(1.5)' },
-        { offset: 1, transform: 'scale(1)' }
-      ])
+        { offset: 1, transform: 'scale(1)' },
+      ]);
 
-    this.animation = this.animationCtrl
-      .create()
-      .duration(2000)
-      .addAnimation([card]);
+    this.animation = this.animationCtrl.create().duration(2000).addAnimation([card]);
   }
 
   play() {
diff --git a/static/usage/v7/animations/before-and-after-hooks/demo.html b/static/usage/v7/animations/before-and-after-hooks/demo.html
index b76d61f78ae..0a1b298775f 100644
--- a/static/usage/v7/animations/before-and-after-hooks/demo.html
+++ b/static/usage/v7/animations/before-and-after-hooks/demo.html
@@ -17,17 +17,17 @@
         .addElement(document.querySelector('#card'))
         .duration(2000)
         .beforeStyles({
-          opacity: 0.2
+          opacity: 0.2,
         })
         .beforeClearStyles(['background'])
         .afterStyles({
-          background: 'rgba(0, 255, 0, 0.5)'
+          background: 'rgba(0, 255, 0, 0.5)',
         })
         .afterClearStyles(['opacity'])
         .keyframes([
           { offset: 0, transform: 'scale(1)' },
           { offset: 0.5, transform: 'scale(1.5)' },
-          { offset: 1, transform: 'scale(1)' }
+          { offset: 1, transform: 'scale(1)' },
         ]);
 
       document.querySelector('#play').addEventListener('click', async () => {
diff --git a/static/usage/v7/animations/before-and-after-hooks/javascript.md b/static/usage/v7/animations/before-and-after-hooks/javascript.md
index d535b707916..07b8abd322a 100644
--- a/static/usage/v7/animations/before-and-after-hooks/javascript.md
+++ b/static/usage/v7/animations/before-and-after-hooks/javascript.md
@@ -12,17 +12,17 @@
     .addElement(document.querySelector('#card'))
     .duration(2000)
     .beforeStyles({
-      opacity: 0.2
+      opacity: 0.2,
     })
     .beforeClearStyles(['background'])
     .afterStyles({
-      background: 'rgba(0, 255, 0, 0.5)'
+      background: 'rgba(0, 255, 0, 0.5)',
     })
     .afterClearStyles(['opacity'])
     .keyframes([
       { offset: 0, transform: 'scale(1)' },
       { offset: 0.5, transform: 'scale(1.5)' },
-      { offset: 1, transform: 'scale(1)' }
+      { offset: 1, transform: 'scale(1)' },
     ]);
 
   document.querySelector('#play').addEventListener('click', async () => {
diff --git a/static/usage/v7/animations/before-and-after-hooks/react.md b/static/usage/v7/animations/before-and-after-hooks/react.md
index 26703345715..92f62c9db60 100644
--- a/static/usage/v7/animations/before-and-after-hooks/react.md
+++ b/static/usage/v7/animations/before-and-after-hooks/react.md
@@ -14,17 +14,17 @@ function Example() {
         .addElement(cardEl.current!)
         .duration(2000)
         .beforeStyles({
-          opacity: 0.2
+          opacity: 0.2,
         })
         .beforeClearStyles(['background'])
         .afterStyles({
-          background: 'rgba(0, 255, 0, 0.5)'
+          background: 'rgba(0, 255, 0, 0.5)',
         })
         .afterClearStyles(['opacity'])
         .keyframes([
           { offset: 0, transform: 'scale(1)' },
           { offset: 0.5, transform: 'scale(1.5)' },
-          { offset: 1, transform: 'scale(1)' }
+          { offset: 1, transform: 'scale(1)' },
         ]);
     }
   }, [cardEl]);
diff --git a/static/usage/v7/animations/before-and-after-hooks/vue.md b/static/usage/v7/animations/before-and-after-hooks/vue.md
index cf406264d30..371675b9e1c 100644
--- a/static/usage/v7/animations/before-and-after-hooks/vue.md
+++ b/static/usage/v7/animations/before-and-after-hooks/vue.md
@@ -31,17 +31,17 @@
           .addElement(cardEl.value.$el)
           .duration(2000)
           .beforeStyles({
-            opacity: 0.2
+            opacity: 0.2,
           })
           .beforeClearStyles(['background'])
           .afterStyles({
-            background: 'rgba(0, 255, 0, 0.5)'
+            background: 'rgba(0, 255, 0, 0.5)',
           })
           .afterClearStyles(['opacity'])
           .keyframes([
             { offset: 0, transform: 'scale(1)' },
             { offset: 0.5, transform: 'scale(1.5)' },
-            { offset: 1, transform: 'scale(1)' }
+            { offset: 1, transform: 'scale(1)' },
           ]);
       });
 

From 6b56cffa2fced40df2280cf361aa34072d6dfcc6 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Wed, 12 Jul 2023 14:39:10 -0400
Subject: [PATCH 3/4] docs(animations): simplify javascript example

---
 .../before-and-after-hooks/javascript.md      | 20 ++++---------------
 1 file changed, 4 insertions(+), 16 deletions(-)

diff --git a/static/usage/v7/animations/before-and-after-hooks/javascript.md b/static/usage/v7/animations/before-and-after-hooks/javascript.md
index 07b8abd322a..a990e3f5893 100644
--- a/static/usage/v7/animations/before-and-after-hooks/javascript.md
+++ b/static/usage/v7/animations/before-and-after-hooks/javascript.md
@@ -3,12 +3,12 @@
   <ion-card-content>Card</ion-card-content>
 </ion-card>
 
-<ion-button id="play">Play</ion-button>
-<ion-button id="pause">Pause</ion-button>
-<ion-button id="stop">Stop</ion-button>
+<ion-button onclick="animation.play()">Play</ion-button>
+<ion-button onclick="animation.pause()">Pause</ion-button>
+<ion-button onclick="animation.stop()">Stop</ion-button>
 
 <script>
-  const card = createAnimation()
+  var animation = createAnimation()
     .addElement(document.querySelector('#card'))
     .duration(2000)
     .beforeStyles({
@@ -24,17 +24,5 @@
       { offset: 0.5, transform: 'scale(1.5)' },
       { offset: 1, transform: 'scale(1)' },
     ]);
-
-  document.querySelector('#play').addEventListener('click', async () => {
-    await card.play();
-  });
-
-  document.querySelector('#pause').addEventListener('click', async () => {
-    await card.pause();
-  });
-
-  document.querySelector('#stop').addEventListener('click', async () => {
-    await card.stop();
-  });
 </script>
 ```

From 636fc3463c66bcd6e708ef3be2e7e416169a3b3c Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Wed, 12 Jul 2023 15:06:00 -0400
Subject: [PATCH 4/4] docs(animations): improve demo in dark mode by using
 filter and box shadow

---
 docs/utilities/animations.md                              | 2 +-
 .../angular/example_component_ts.md                       | 8 ++++----
 .../usage/v7/animations/before-and-after-hooks/demo.html  | 8 ++++----
 .../v7/animations/before-and-after-hooks/javascript.md    | 8 ++++----
 .../usage/v7/animations/before-and-after-hooks/react.md   | 8 ++++----
 static/usage/v7/animations/before-and-after-hooks/vue.md  | 8 ++++----
 6 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/docs/utilities/animations.md b/docs/utilities/animations.md
index 0bf2359d84a..1fa451acb3e 100644
--- a/docs/utilities/animations.md
+++ b/docs/utilities/animations.md
@@ -255,7 +255,7 @@ import Group from '@site/static/usage/v7/animations/group/index.md';
 
 Ionic Animations provides hooks that let you alter an element before an animation runs and after an animation completes. These hooks can be used to perform DOM reads and writes as well as add or remove classes and inline styles.
 
-This example sets an inline opacity of `0.2` on the card prior to the animation starting. Once the animation finishes, the background color of the element is set to `rgba(0, 255, 0, 0.5)`, and the inline opacity is cleared. The animation must be stopped in order to remove the background and play it with the opacity again.
+This example sets an inline filter which inverts the background color of the card by `75%` prior to the animation starting. Once the animation finishes, the box shadow on the element is set to `rgba(255, 0, 50, 0.4) 0px 4px 16px 6px`, a red glow, and the inline filter is cleared. The animation must be stopped in order to remove the box shadow and play it with the filter again.
 
 See [Methods](#methods) for a complete list of hooks.
 
diff --git a/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md b/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md
index 908757603e7..36a7e22081a 100644
--- a/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md
+++ b/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md
@@ -21,13 +21,13 @@ export class ExampleComponent {
       .addElement(this.cardElements.get(0).nativeElement)
       .duration(2000)
       .beforeStyles({
-        opacity: 0.2,
+        filter: 'invert(75%)',
       })
-      .beforeClearStyles(['background'])
+      .beforeClearStyles(['box-shadow'])
       .afterStyles({
-        background: 'rgba(0, 255, 0, 0.5)',
+        'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px',
       })
-      .afterClearStyles(['opacity'])
+      .afterClearStyles(['filter'])
       .keyframes([
         { offset: 0, transform: 'scale(1)' },
         { offset: 0.5, transform: 'scale(1.5)' },
diff --git a/static/usage/v7/animations/before-and-after-hooks/demo.html b/static/usage/v7/animations/before-and-after-hooks/demo.html
index 0a1b298775f..30466c2bc93 100644
--- a/static/usage/v7/animations/before-and-after-hooks/demo.html
+++ b/static/usage/v7/animations/before-and-after-hooks/demo.html
@@ -17,13 +17,13 @@
         .addElement(document.querySelector('#card'))
         .duration(2000)
         .beforeStyles({
-          opacity: 0.2,
+          filter: 'invert(75%)',
         })
-        .beforeClearStyles(['background'])
+        .beforeClearStyles(['box-shadow'])
         .afterStyles({
-          background: 'rgba(0, 255, 0, 0.5)',
+          'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px',
         })
-        .afterClearStyles(['opacity'])
+        .afterClearStyles(['filter'])
         .keyframes([
           { offset: 0, transform: 'scale(1)' },
           { offset: 0.5, transform: 'scale(1.5)' },
diff --git a/static/usage/v7/animations/before-and-after-hooks/javascript.md b/static/usage/v7/animations/before-and-after-hooks/javascript.md
index a990e3f5893..262f8cd9803 100644
--- a/static/usage/v7/animations/before-and-after-hooks/javascript.md
+++ b/static/usage/v7/animations/before-and-after-hooks/javascript.md
@@ -12,13 +12,13 @@
     .addElement(document.querySelector('#card'))
     .duration(2000)
     .beforeStyles({
-      opacity: 0.2,
+      filter: 'invert(75%)',
     })
-    .beforeClearStyles(['background'])
+    .beforeClearStyles(['box-shadow'])
     .afterStyles({
-      background: 'rgba(0, 255, 0, 0.5)',
+      'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px',
     })
-    .afterClearStyles(['opacity'])
+    .afterClearStyles(['filter'])
     .keyframes([
       { offset: 0, transform: 'scale(1)' },
       { offset: 0.5, transform: 'scale(1.5)' },
diff --git a/static/usage/v7/animations/before-and-after-hooks/react.md b/static/usage/v7/animations/before-and-after-hooks/react.md
index 92f62c9db60..bae1185b19d 100644
--- a/static/usage/v7/animations/before-and-after-hooks/react.md
+++ b/static/usage/v7/animations/before-and-after-hooks/react.md
@@ -14,13 +14,13 @@ function Example() {
         .addElement(cardEl.current!)
         .duration(2000)
         .beforeStyles({
-          opacity: 0.2,
+          filter: 'invert(75%)',
         })
-        .beforeClearStyles(['background'])
+        .beforeClearStyles(['box-shadow'])
         .afterStyles({
-          background: 'rgba(0, 255, 0, 0.5)',
+          'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px',
         })
-        .afterClearStyles(['opacity'])
+        .afterClearStyles(['filter'])
         .keyframes([
           { offset: 0, transform: 'scale(1)' },
           { offset: 0.5, transform: 'scale(1.5)' },
diff --git a/static/usage/v7/animations/before-and-after-hooks/vue.md b/static/usage/v7/animations/before-and-after-hooks/vue.md
index 371675b9e1c..3b7463a8546 100644
--- a/static/usage/v7/animations/before-and-after-hooks/vue.md
+++ b/static/usage/v7/animations/before-and-after-hooks/vue.md
@@ -31,13 +31,13 @@
           .addElement(cardEl.value.$el)
           .duration(2000)
           .beforeStyles({
-            opacity: 0.2,
+            filter: 'invert(75%)',
           })
-          .beforeClearStyles(['background'])
+          .beforeClearStyles(['box-shadow'])
           .afterStyles({
-            background: 'rgba(0, 255, 0, 0.5)',
+            'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px',
           })
-          .afterClearStyles(['opacity'])
+          .afterClearStyles(['filter'])
           .keyframes([
             { offset: 0, transform: 'scale(1)' },
             { offset: 0.5, transform: 'scale(1.5)' },