From 0538b601af07c170a179156766186ae751d8c892 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 14 Jul 2023 11:02:53 -0400
Subject: [PATCH 01/13] docs(animation): add base demo

---
 docs/utilities/animations.md                  | 318 +-----------------
 .../gesture/angular/example_component_html.md |   9 +
 .../gesture/angular/example_component_ts.md   |  40 +++
 static/usage/v7/animations/gesture/demo.html  | 106 ++++++
 static/usage/v7/animations/gesture/index.md   |  25 ++
 .../usage/v7/animations/gesture/javascript.md |  18 +
 static/usage/v7/animations/gesture/react.md   |  45 +++
 static/usage/v7/animations/gesture/vue.md     |  51 +++
 8 files changed, 297 insertions(+), 315 deletions(-)
 create mode 100644 static/usage/v7/animations/gesture/angular/example_component_html.md
 create mode 100644 static/usage/v7/animations/gesture/angular/example_component_ts.md
 create mode 100644 static/usage/v7/animations/gesture/demo.html
 create mode 100644 static/usage/v7/animations/gesture/index.md
 create mode 100644 static/usage/v7/animations/gesture/javascript.md
 create mode 100644 static/usage/v7/animations/gesture/react.md
 create mode 100644 static/usage/v7/animations/gesture/vue.md

diff --git a/docs/utilities/animations.md b/docs/utilities/animations.md
index a71aeee59c2..87b67c482b7 100644
--- a/docs/utilities/animations.md
+++ b/docs/utilities/animations.md
@@ -275,323 +275,11 @@ import Chain from '@site/static/usage/v7/animations/chain/index.md';
 
 Ionic Animations gives developers the ability to create powerful gesture-based animations by integrating seamlessly with [Ionic Gestures](gestures.md).
 
-### 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
-let initialStep = 0;
-let started = false;
-
-const square = document.querySelector('.square');
-const MAX_TRANSLATE = 400;
-
-const animation = createAnimation()
-  .addElement(square)
-  .duration(1000)
-  .fromTo('transform', 'translateX(0)', `translateX(${MAX_TRANSLATE}px)`);
-
-const gesture = createGesture({
-  el: square,
-  threshold: 0,
-  gestureName: 'square-drag',
-  onMove: ev => onMove(ev),
-  onEnd: ev => onEnd(ev)
-})
-
-gesture.enable(true);
-
-const onMove = (ev): {
-  if (!started) {
-    animation.progressStart();
-    started = true;
-  }
-
-  animation.progressStep(getStep(ev));
-}
-
-const onEnd = (ev): {
-  if (!started) { return; }
-
-  gesture.enable(false);
-
-  const step = getStep(ev);
-  const shouldComplete = step > 0.5;
-
-  animation
-    .progressEnd((shouldComplete) ? 1 : 0, step)
-    .onFinish((): { gesture.enable(true); });
-
-  initialStep = (shouldComplete) ? MAX_TRANSLATE : 0;
-  started = false;
-}
-
-const clamp = (min, n, max): {
-  return Math.max(min, Math.min(n, max));
-};
-
-const getStep = (ev): {
-  const delta = initialStep + ev.deltaX;
-  return clamp(0, delta / MAX_TRANSLATE, 1);
-}
-```
-</TabItem>
-<TabItem value="angular">
-
-```tsx
-private animation?: Animation;
-private gesture?: Gesture;
-
-private started: boolean = false;
-private initialStep: number = 0;
-private MAX_TRANSLATE: number = 400;
-
-ngOnInit() {
-  this.animation = this.animationCtrl.create()
-    .addElement(this.square.nativeElement)
-    .duration(1000)
-    .fromTo('transform', 'translateX(0)', `translateX(${this.MAX_TRANSLATE}px)`);
-
-  this.gesture = this.gestureCtrl.create({
-    el: this.square.nativeElement,
-    threshold: 0,
-    gestureName: 'square-drag',
-    onMove: ev => this.onMove(ev),
-    onEnd: ev => this.onEnd(ev)
-  })
-
-  this.gesture.enable(true);
-}
-
-private onMove(ev) {
-  if (!started) {
-    this.animation.progressStart();
-    this.started = true;
-  }
-
-  this.animation.progressStep(this.getStep(ev));
-}
-
-private onEnd(ev) {
-  if (!this.started) { return; }
-
-  this.gesture.enable(false);
-
-  const step = this.getStep(ev);
-  const shouldComplete = step > 0.5;
-
-  this.animation
-    .progressEnd((shouldComplete) ? 1 : 0, step)
-    .onFinish((): { this.gesture.enable(true); });
-
-  this.initialStep = (shouldComplete) ? this.MAX_TRANSLATE : 0;
-  this.started = false;
-}
-
-private clamp(min, n, max) {
-  return Math.max(min, Math.min(n, max));
-}
-
-private getStep(ev) {
-  const delta = this.initialStep + ev.deltaX;
-  return this.clamp(0, delta / this.MAX_TRANSLATE, 1);
-}
-```
-</TabItem>
-<TabItem value="react">
-
-```javascript
-import { createGesture, CreateAnimation, Gesture, GestureDetail } from '@ionic/react';
-import React from 'react';
-
-const MAX_TRANSLATE = 400;
-
-class MyComponent extends React.Component<{}, any> {
-  private animation: React.RefObject<CreateAnimation> = React.createRef();
-  private gesture?: Gesture;
-  private started: boolean = false;
-  private initialStep: number = 0;
-
-  constructor(props: any) {
-    super(props);
-
-    this.state = {
-      progressStart: undefined,
-      progressStep: undefined,
-      progressEnd: undefined,
-      onFinish: undefined
-    };
-  }
-
-  componentDidMount() {
-    const square = Array.from(this.animation.current!.nodes.values())[0];
-
-    this.gesture = createGesture({
-      el: square,
-      gestureName: 'square-drag',
-      threshold: 0,
-      onMove: ev => this.onMove(ev),
-      onEnd: ev => this.onEnd(ev)
-    });
-
-    this.gesture.enable(true);
-  }
-
-  private onMove(ev: GestureDetail) {
-    if (!this.started) {
-      this.setState({
-        ...this.state,
-        progressStart: { forceLinearEasing: true }
-      });
-      this.started = true;
-    }
-
-    this.setState({
-      ...this.state,
-      progressStep: { step: this.getStep(ev) }
-    });
-  }
-
-  private onEnd(ev: GestureDetail) {
-    if (!this.started) { return; }
-
-    this.gesture!.enable(false);
-
-    const step = this.getStep(ev);
-    const shouldComplete = step > 0.5;
-
-    this.setState({
-      ...this.state,
-      progressEnd: { playTo: (shouldComplete) ? 1 : 0, step },
-      onFinish: { callback: () => {
-        this.gesture!.enable(true);
-        this.setState({
-          progressStart: undefined,
-          progressStep: undefined,
-          progressEnd: undefined
-        })
-      }, opts: { oneTimeCallback: true }}
-    });
-
-    this.initialStep = (shouldComplete) ? MAX_TRANSLATE : 0;
-    this.started = false;
-  }
-
-  private getStep(ev: GestureDetail) {
-    const delta = this.initialStep + ev.deltaX;
-    return this.clamp(0, delta / MAX_TRANSLATE, 1);
-  }
-
-  private clamp(min: number, n: number, max: number) {
-    return Math.max(min, Math.min(n, max));
-  }
-
-  render() {
-    return (
-      <>
-        <div className="track">
-          <CreateAnimation
-            ref={this.animation}
-            duration={1000}
-            progressStart={this.state.progressStart}
-            progressStep={this.state.progressStep}
-            progressEnd={this.state.progressEnd}
-            onFinish={this.state.onFinish}
-            fromTo={{
-              property: 'transform',
-              fromValue: 'translateX(0)',
-              toValue: `translateX(${MAX_TRANSLATE}px)`
-          }}>
-            <div className="square"></div>
-          </CreateAnimation>
-        </div>
-      </>
-    );
-  }
-}
-```
-</TabItem>
-<TabItem value="vue">
-
-```javascript
-import { createAnimation, createGesture } from '@ionic/vue';
-import { ref } from 'vue';
-
-...
-
-let initialStep = 0;
-let started = false;
-
-const squareRef = ref();
-const MAX_TRANSLATE = 400;
-
-const animation = createAnimation()
-  .addElement(squareRef.value)
-  .duration(1000)
-  .fromTo('transform', 'translateX(0)', `translateX(${MAX_TRANSLATE}px)`);
-
-const gesture = createGesture({
-  el: squareRef.value,
-  threshold: 0,
-  gestureName: 'square-drag',
-  onMove: ev => onMove(ev),
-  onEnd: ev => onEnd(ev)
-})
-
-gesture.enable(true);
-
-const onMove = (ev): {
-  if (!started) {
-    animation.progressStart();
-    started = true;
-  }
-
-  animation.progressStep(getStep(ev));
-}
-
-const onEnd = (ev): {
-  if (!started) { return; }
-
-  gesture.enable(false);
-
-  const step = getStep(ev);
-  const shouldComplete = step > 0.5;
-
-  animation
-    .progressEnd((shouldComplete) ? 1 : 0, step)
-    .onFinish((): { gesture.enable(true); });
-
-  initialStep = (shouldComplete) ? MAX_TRANSLATE : 0;
-  started = false;
-}
-
-const clamp = (min, n, max): {
-  return Math.max(min, Math.min(n, max));
-};
-
-const getStep = (ev): {
-  const delta = initialStep + ev.deltaX;
-  return clamp(0, delta / MAX_TRANSLATE, 1);
-}
-```
-</TabItem>
-</Tabs>
-````
+In the following example we are creating a track along which we can drag the card element. Our `animation` object will take care of moving the card element either left or right, and our `gesture` object will instruct the `animation` object which direction to move in.
 
-In this example we are creating a track along which we can drag the `.square` element. Our `animation` object will take care of moving the `.square` element either left or right, and our `gesture` object will instruct the `animation` object which direction to move in.
+import Gesture from '@site/static/usage/v7/animations/gesture/index.md';
 
-<Codepen user="ionic" slug="jONxzRL" />
+<Gesture />
 
 ## Preference-Based Animations
 
diff --git a/static/usage/v7/animations/gesture/angular/example_component_html.md b/static/usage/v7/animations/gesture/angular/example_component_html.md
new file mode 100644
index 00000000000..1bd8875b1b3
--- /dev/null
+++ b/static/usage/v7/animations/gesture/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+<ion-card #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/gesture/angular/example_component_ts.md b/static/usage/v7/animations/gesture/angular/example_component_ts.md
new file mode 100644
index 00000000000..e8a1dae1af8
--- /dev/null
+++ b/static/usage/v7/animations/gesture/angular/example_component_ts.md
@@ -0,0 +1,40 @@
+```ts
+import { Component, ElementRef, ViewChildren, ViewChild } 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 {
+  @ViewChild(IonCard, { read: ElementRef }) card: ElementRef<HTMLIonCardElement>;
+
+  private animation: Animation;
+
+  constructor(private animationCtrl: AnimationController) {}
+
+  ngAfterViewInit() {
+    this.animation = this.animationCtrl
+      .create()
+      .addElement(this.card.nativeElement)
+      .duration(1500)
+      .iterations(Infinity)
+      .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
+      .fromTo('opacity', '1', '0.2');
+  }
+
+  play() {
+    this.animation.play();
+  }
+
+  pause() {
+    this.animation.pause();
+  }
+
+  stop() {
+    this.animation.stop();
+  }
+}
+```
diff --git a/static/usage/v7/animations/gesture/demo.html b/static/usage/v7/animations/gesture/demo.html
new file mode 100644
index 00000000000..f96f08bdce7
--- /dev/null
+++ b/static/usage/v7/animations/gesture/demo.html
@@ -0,0 +1,106 @@
+<!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, createGesture } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/index.esm.js';
+      window.createAnimation = createAnimation;
+      window.createGesture = createGesture;
+
+      let initialStep = 0;
+      let started = false;
+
+      const card = document.querySelector('ion-card');
+      const track = document.querySelector('.track');
+
+      /**
+       * The track is 344px wide.
+       * The card is 100px wide.
+       * We want 16px of margin on each end of the track.
+       */
+      const MAX_TRANSLATE = 344 - 100 - 32
+
+      const animation = createAnimation()
+        .addElement(card)
+        .duration(1000)
+        .fromTo('transform', 'translateX(0)', `translateX(${MAX_TRANSLATE}px)`);
+
+      const gesture = createGesture({
+        el: card,
+        threshold: 0,
+        gestureName: 'card-drag',
+        onMove: ev => onMove(ev),
+        onEnd: ev => onEnd(ev)
+      });
+
+      gesture.enable(true);
+
+      const onMove = (ev) => {
+        if (!started) {
+          animation.progressStart();
+          started = true;
+        }
+
+        animation.progressStep(getStep(ev));
+      }
+
+      const onEnd = (ev) => {
+        if (!started) { return; }
+
+        gesture.enable(false);
+
+        const step = getStep(ev);
+        const shouldComplete = step > 0.5;
+
+        animation
+          .progressEnd((shouldComplete) ? 1 : 0, step)
+          .onFinish(() => { gesture.enable(true); });
+
+        initialStep = (shouldComplete) ? MAX_TRANSLATE : 0;
+        started = false;
+      }
+
+      const clamp = (min, n, max) => {
+        return Math.max(min, Math.min(n, max));
+      };
+
+      const getStep = (ev) => {
+        const delta = initialStep + ev.deltaX;
+        return clamp(0, delta / MAX_TRANSLATE, 1);
+      }
+    </script>
+
+    <style>
+      .container {
+        flex-direction: column;
+      }
+
+      ion-card {
+        width: 100px;
+      }
+
+      .track {
+        width: 344px;
+        background: rgba(0, 0, 0, 0.2);
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="container">
+      <div class="track">
+        <ion-card id="card" button="true">
+          <ion-card-content>Card</ion-card-content>
+        </ion-card>
+      </div>
+
+      <p>Drag the square along the track.</p>
+    </div>
+  </body>
+</html>
diff --git a/static/usage/v7/animations/gesture/index.md b/static/usage/v7/animations/gesture/index.md
new file mode 100644
index 00000000000..6775173349b
--- /dev/null
+++ b/static/usage/v7/animations/gesture/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/gesture/demo.html"
+  devicePreview={true}
+/>
diff --git a/static/usage/v7/animations/gesture/javascript.md b/static/usage/v7/animations/gesture/javascript.md
new file mode 100644
index 00000000000..3c98a4e039f
--- /dev/null
+++ b/static/usage/v7/animations/gesture/javascript.md
@@ -0,0 +1,18 @@
+```html
+<ion-card id="card">
+  <ion-card-content>Card</ion-card-content>
+</ion-card>
+
+<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>
+  var animation = createAnimation()
+    .addElement(document.querySelector('#card'))
+    .duration(1500)
+    .iterations(Infinity)
+    .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
+    .fromTo('opacity', '1', '0.2');
+</script>
+```
diff --git a/static/usage/v7/animations/gesture/react.md b/static/usage/v7/animations/gesture/react.md
new file mode 100644
index 00000000000..9134a2d9f24
--- /dev/null
+++ b/static/usage/v7/animations/gesture/react.md
@@ -0,0 +1,45 @@
+```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 animation = useRef<Animation | null>(null);
+
+  useEffect(() => {
+    if (animation.current === null) {
+      animation.current = createAnimation()
+        .addElement(cardEl.current!)
+        .duration(1500)
+        .iterations(Infinity)
+        .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
+        .fromTo('opacity', '1', '0.2');
+    }
+  }, [cardEl]);
+
+  const play = () => {
+    animation.current?.play();
+  };
+  const pause = () => {
+    animation.current?.pause();
+  };
+  const stop = () => {
+    animation.current?.stop();
+  };
+
+  return (
+    <>
+      <IonCard ref={cardEl}>
+        <IonCardContent>Card</IonCardContent>
+      </IonCard>
+
+      <IonButton onClick={play}>Play</IonButton>
+      <IonButton onClick={pause}>Pause</IonButton>
+      <IonButton onClick={stop}>Stop</IonButton>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/animations/gesture/vue.md b/static/usage/v7/animations/gesture/vue.md
new file mode 100644
index 00000000000..afd6c68891b
--- /dev/null
+++ b/static/usage/v7/animations/gesture/vue.md
@@ -0,0 +1,51 @@
+```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 animation: Animation;
+
+      onMounted(() => {
+        animation = createAnimation()
+          .addElement(cardEl.value.$el)
+          .duration(1500)
+          .iterations(Infinity)
+          .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
+          .fromTo('opacity', '1', '0.2');
+      });
+
+      const play = () => animation.play();
+      const pause = () => animation.pause();
+      const stop = () => animation.stop();
+
+      return {
+        play,
+        pause,
+        stop,
+        cardEl,
+      };
+    },
+  });
+</script>
+```

From ea4933caeb561927d3ba7c035b46eeb138260466 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 14 Jul 2023 11:03:31 -0400
Subject: [PATCH 02/13] semi colon

---
 static/usage/v7/animations/gesture/demo.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/usage/v7/animations/gesture/demo.html b/static/usage/v7/animations/gesture/demo.html
index f96f08bdce7..d72fc5edcc4 100644
--- a/static/usage/v7/animations/gesture/demo.html
+++ b/static/usage/v7/animations/gesture/demo.html
@@ -24,7 +24,7 @@
        * The card is 100px wide.
        * We want 16px of margin on each end of the track.
        */
-      const MAX_TRANSLATE = 344 - 100 - 32
+      const MAX_TRANSLATE = 344 - 100 - 32;
 
       const animation = createAnimation()
         .addElement(card)

From 378ce578130bf592679dab702d736e960b263bb6 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 14 Jul 2023 11:11:09 -0400
Subject: [PATCH 03/13] clean up

---
 static/usage/v7/animations/gesture/demo.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/static/usage/v7/animations/gesture/demo.html b/static/usage/v7/animations/gesture/demo.html
index d72fc5edcc4..b1680013734 100644
--- a/static/usage/v7/animations/gesture/demo.html
+++ b/static/usage/v7/animations/gesture/demo.html
@@ -78,16 +78,16 @@
 
     <style>
       .container {
-        flex-direction: column;
-      }
-
-      ion-card {
-        width: 100px;
+        display: flex;
       }
 
       .track {
         width: 344px;
-        background: rgba(0, 0, 0, 0.2);
+        background: var(--ion-color-medium);
+      }
+
+      ion-card {
+        width: 100px;
       }
     </style>
   </head>

From ea370d62d9dc23c4bcd942bf57d9537de731dc48 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 14 Jul 2023 11:11:28 -0400
Subject: [PATCH 04/13] typo

---
 static/usage/v7/animations/gesture/demo.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/usage/v7/animations/gesture/demo.html b/static/usage/v7/animations/gesture/demo.html
index b1680013734..650ab898d89 100644
--- a/static/usage/v7/animations/gesture/demo.html
+++ b/static/usage/v7/animations/gesture/demo.html
@@ -78,7 +78,7 @@
 
     <style>
       .container {
-        display: flex;
+        flex-direction: column;
       }
 
       .track {

From fbde216208b825564c341775e9ce6737762b2498 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 14 Jul 2023 11:16:51 -0400
Subject: [PATCH 05/13] fix MD styles

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

diff --git a/static/usage/v7/animations/gesture/demo.html b/static/usage/v7/animations/gesture/demo.html
index 650ab898d89..28d537395fb 100644
--- a/static/usage/v7/animations/gesture/demo.html
+++ b/static/usage/v7/animations/gesture/demo.html
@@ -84,10 +84,13 @@
       .track {
         width: 344px;
         background: var(--ion-color-medium);
+        padding: 16px;
       }
 
       ion-card {
         width: 100px;
+        box-shadow: none;
+        margin: 0px;
       }
     </style>
   </head>

From 0d3eb9d2d26b74edb98fbbb59738feff064c529a Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 14 Jul 2023 11:17:12 -0400
Subject: [PATCH 06/13] add JS demo

---
 static/code/stackblitz/v7/html/index.ts       |   3 +-
 .../usage/v7/animations/gesture/javascript.md | 103 ++++++++++++++++--
 2 files changed, 93 insertions(+), 13 deletions(-)

diff --git a/static/code/stackblitz/v7/html/index.ts b/static/code/stackblitz/v7/html/index.ts
index c820961c828..071bc801d6c 100644
--- a/static/code/stackblitz/v7/html/index.ts
+++ b/static/code/stackblitz/v7/html/index.ts
@@ -1,6 +1,6 @@
 import { defineCustomElements } from '@ionic/core/loader';
 
-import { createAnimation, loadingController, modalController, pickerController, toastController } from '@ionic/core';
+import { createAnimation, createGesture, loadingController, modalController, pickerController, toastController } from '@ionic/core';
 
 /* Core CSS required for Ionic components to work properly */
 import '@ionic/core/css/core.css';
@@ -28,3 +28,4 @@ defineCustomElements();
 (window as any).pickerController = pickerController;
 (window as any).toastController = toastController;
 (window as any).createAnimation = createAnimation;
+(window as any).createGesture = createGesture;
diff --git a/static/usage/v7/animations/gesture/javascript.md b/static/usage/v7/animations/gesture/javascript.md
index 3c98a4e039f..20bbe3511da 100644
--- a/static/usage/v7/animations/gesture/javascript.md
+++ b/static/usage/v7/animations/gesture/javascript.md
@@ -1,18 +1,97 @@
 ```html
-<ion-card id="card">
-  <ion-card-content>Card</ion-card-content>
-</ion-card>
+<div class="container">
+  <div class="track">
+    <ion-card id="card" button="true">
+      <ion-card-content>Card</ion-card-content>
+    </ion-card>
+  </div>
+</div>
 
-<ion-button onclick="animation.play()">Play</ion-button>
-<ion-button onclick="animation.pause()">Pause</ion-button>
-<ion-button onclick="animation.stop()">Stop</ion-button>
+<p>Drag the square along the track.</p>
+
+<style>
+  .container {
+    display: flex;
+  }
+  
+  .track {
+    width: 344px;
+
+    background: var(--ion-color-medium);
+    
+    padding: 16px;
+  }
+
+  ion-card {
+    width: 100px;
+
+    box-shadow: none;
+    
+    margin: 0px;
+  }
+</style>
 
 <script>
-  var animation = createAnimation()
-    .addElement(document.querySelector('#card'))
-    .duration(1500)
-    .iterations(Infinity)
-    .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
-    .fromTo('opacity', '1', '0.2');
+  let initialStep = 0;
+  let started = false;
+  
+  const card = document.querySelector('ion-card');
+  const track = document.querySelector('.track');
+  
+  /**
+   * The track is 344px wide.
+   * The card is 100px wide.
+   * We want 16px of margin on each end of the track.
+   */
+  const MAX_TRANSLATE = 344 - 100 - 32;
+  
+  const animation = createAnimation()
+    .addElement(card)
+    .duration(1000)
+    .fromTo('transform', 'translateX(0)', `translateX(${MAX_TRANSLATE}px)`);
+  
+  const gesture = createGesture({
+    el: card,
+    threshold: 0,
+    gestureName: 'card-drag',
+    onMove: ev => onMove(ev),
+    onEnd: ev => onEnd(ev)
+  });
+  
+  gesture.enable(true);
+  
+  var onMove = (ev) => {
+    if (!started) {
+      animation.progressStart();
+      started = true;
+    }
+  
+    animation.progressStep(getStep(ev));
+  }
+  
+  var onEnd = (ev) => {
+    if (!started) { return; }
+  
+    gesture.enable(false);
+  
+    const step = getStep(ev);
+    const shouldComplete = step > 0.5;
+  
+    animation
+      .progressEnd((shouldComplete) ? 1 : 0, step)
+      .onFinish(() => { gesture.enable(true); });
+  
+    initialStep = (shouldComplete) ? MAX_TRANSLATE : 0;
+    started = false;
+  }
+  
+  var clamp = (min, n, max) => {
+    return Math.max(min, Math.min(n, max));
+  };
+  
+  var getStep = (ev) => {
+    const delta = initialStep + ev.deltaX;
+    return clamp(0, delta / MAX_TRANSLATE, 1);
+  }
 </script>
 ```

From 056a25a506b3b015aa0ba09cae61fe4a463e3a4c Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 14 Jul 2023 11:19:45 -0400
Subject: [PATCH 07/13] add Vue demo

---
 static/usage/v7/animations/gesture/vue.md | 117 ++++++++++++++++------
 1 file changed, 89 insertions(+), 28 deletions(-)

diff --git a/static/usage/v7/animations/gesture/vue.md b/static/usage/v7/animations/gesture/vue.md
index afd6c68891b..9273300f4b3 100644
--- a/static/usage/v7/animations/gesture/vue.md
+++ b/static/usage/v7/animations/gesture/vue.md
@@ -1,51 +1,112 @@
 ```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>
+  <div class="container">
+    <div class="track">
+      <ion-card id="card" button="true" ref="cardEl">
+        <ion-card-content>Card</ion-card-content>
+      </ion-card>
+    </div>
+  
+    <p>Drag the square along the track.</p>
+  </div>
 </template>
 
 <script lang="ts">
-  import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/vue';
-  import type { Animation } from '@ionic/vue';
+  import { IonCard, IonCardContent, createAnimation, createGesture } from '@ionic/vue';
 
   import { defineComponent, ref, onMounted } from 'vue';
 
   export default defineComponent({
     components: {
-      IonButton,
       IonCard,
       IonCardContent,
     },
     setup() {
       const cardEl = ref(null);
 
-      let animation: Animation;
-
       onMounted(() => {
-        animation = createAnimation()
-          .addElement(cardEl.value.$el)
-          .duration(1500)
-          .iterations(Infinity)
-          .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
-          .fromTo('opacity', '1', '0.2');
+        let initialStep = 0;
+        let started = false;
+        
+        const card = document.querySelector('ion-card');
+        
+        /**
+         * The track is 344px wide.
+         * The card is 100px wide.
+         * We want 16px of margin on each end of the track.
+         */
+        const MAX_TRANSLATE = 344 - 100 - 32;
+        
+        const animation = createAnimation()
+          .addElement(card)
+          .duration(1000)
+          .fromTo('transform', 'translateX(0)', `translateX(${MAX_TRANSLATE}px)`);
+        
+        const gesture = createGesture({
+          el: card,
+          threshold: 0,
+          gestureName: 'card-drag',
+          onMove: ev => onMove(ev),
+          onEnd: ev => onEnd(ev)
+        });
+        
+        gesture.enable(true);
+        
+        const onMove = (ev) => {
+          if (!started) {
+            animation.progressStart();
+            started = true;
+          }
+        
+          animation.progressStep(getStep(ev));
+        }
+        
+        const onEnd = (ev) => {
+          if (!started) { return; }
+        
+          gesture.enable(false);
+        
+          const step = getStep(ev);
+          const shouldComplete = step > 0.5;
+        
+          animation
+            .progressEnd((shouldComplete) ? 1 : 0, step)
+            .onFinish(() => { gesture.enable(true); });
+        
+          initialStep = (shouldComplete) ? MAX_TRANSLATE : 0;
+          started = false;
+        }
+        
+        const clamp = (min, n, max) => {
+          return Math.max(min, Math.min(n, max));
+        };
+        
+        const getStep = (ev) => {
+          const delta = initialStep + ev.deltaX;
+          return clamp(0, delta / MAX_TRANSLATE, 1);
+        }
       });
 
-      const play = () => animation.play();
-      const pause = () => animation.pause();
-      const stop = () => animation.stop();
-
-      return {
-        play,
-        pause,
-        stop,
-        cardEl,
-      };
+      return { cardEl };
     },
   });
 </script>
+
+<style scoped>
+  .container {
+    flex-direction: column;
+  }
+  
+  .track {
+    width: 344px;
+    background: var(--ion-color-medium);
+    padding: 16px;
+  }
+  
+  ion-card {
+    width: 100px;
+    box-shadow: none;
+    margin: 0px;
+  }
+</style>
 ```

From a351cc94213a1b0e8ccdc5c49e392f9daafbc55a Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 14 Jul 2023 11:20:00 -0400
Subject: [PATCH 08/13] remove track selector

---
 static/usage/v7/animations/gesture/demo.html     | 1 -
 static/usage/v7/animations/gesture/javascript.md | 1 -
 2 files changed, 2 deletions(-)

diff --git a/static/usage/v7/animations/gesture/demo.html b/static/usage/v7/animations/gesture/demo.html
index 28d537395fb..3da003f30f4 100644
--- a/static/usage/v7/animations/gesture/demo.html
+++ b/static/usage/v7/animations/gesture/demo.html
@@ -17,7 +17,6 @@
       let started = false;
 
       const card = document.querySelector('ion-card');
-      const track = document.querySelector('.track');
 
       /**
        * The track is 344px wide.
diff --git a/static/usage/v7/animations/gesture/javascript.md b/static/usage/v7/animations/gesture/javascript.md
index 20bbe3511da..24cafd23b90 100644
--- a/static/usage/v7/animations/gesture/javascript.md
+++ b/static/usage/v7/animations/gesture/javascript.md
@@ -36,7 +36,6 @@
   let started = false;
   
   const card = document.querySelector('ion-card');
-  const track = document.querySelector('.track');
   
   /**
    * The track is 344px wide.

From 482aac033e44bd55bc6266f953e8ad9c01c61247 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 14 Jul 2023 14:18:47 -0400
Subject: [PATCH 09/13] docs: add angular example

---
 .../gesture/angular/example_component_css.md  | 17 ++++
 .../gesture/angular/example_component_html.md | 14 ++--
 .../gesture/angular/example_component_ts.md   | 84 ++++++++++++++-----
 static/usage/v7/animations/gesture/index.md   |  2 +
 4 files changed, 91 insertions(+), 26 deletions(-)
 create mode 100644 static/usage/v7/animations/gesture/angular/example_component_css.md

diff --git a/static/usage/v7/animations/gesture/angular/example_component_css.md b/static/usage/v7/animations/gesture/angular/example_component_css.md
new file mode 100644
index 00000000000..c5dbd051cc3
--- /dev/null
+++ b/static/usage/v7/animations/gesture/angular/example_component_css.md
@@ -0,0 +1,17 @@
+```css
+.container {
+  flex-direction: column;
+}
+
+.track {
+  width: 344px;
+  background: var(--ion-color-medium);
+  padding: 16px;
+}
+
+ion-card {
+  width: 100px;
+  box-shadow: none;
+  margin: 0px;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/animations/gesture/angular/example_component_html.md b/static/usage/v7/animations/gesture/angular/example_component_html.md
index 1bd8875b1b3..56b2deacd70 100644
--- a/static/usage/v7/animations/gesture/angular/example_component_html.md
+++ b/static/usage/v7/animations/gesture/angular/example_component_html.md
@@ -1,9 +1,11 @@
 ```html
-<ion-card #card>
-  <ion-card-content>Card</ion-card-content>
-</ion-card>
+<div class="container">
+  <div class="track">
+    <ion-card id="card" button="true">
+      <ion-card-content>Card</ion-card-content>
+    </ion-card>
+  </div>
 
-<ion-button (click)="play()">Play</ion-button>
-<ion-button (click)="pause()">Pause</ion-button>
-<ion-button (click)="stop()">Stop</ion-button>
+  <p>Drag the square along the track.</p>
+</div>
 ```
diff --git a/static/usage/v7/animations/gesture/angular/example_component_ts.md b/static/usage/v7/animations/gesture/angular/example_component_ts.md
index e8a1dae1af8..a0f5ea186ab 100644
--- a/static/usage/v7/animations/gesture/angular/example_component_ts.md
+++ b/static/usage/v7/animations/gesture/angular/example_component_ts.md
@@ -1,40 +1,84 @@
 ```ts
 import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core';
 import type { QueryList } from '@angular/core';
-import type { Animation } from '@ionic/angular';
-import { AnimationController, IonCard } from '@ionic/angular';
+import { AnimationController, GestureController, IonCard } from '@ionic/angular';
+import type { Animation, Gesture } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css']
 })
 export class ExampleComponent {
   @ViewChild(IonCard, { read: ElementRef }) card: ElementRef<HTMLIonCardElement>;
-
+  
   private animation: Animation;
+  private gesture: Gesture;
+  private started = false;
+  private initialStep = 0;
 
-  constructor(private animationCtrl: AnimationController) {}
+  /**
+     * The track is 344px wide.
+     * The card is 100px wide.
+     * We want 16px of margin on each end of the track.
+     */
+  private readonly MAX_TRANSLATE = 344 - 100 - 32;
 
-  ngAfterViewInit() {
-    this.animation = this.animationCtrl
-      .create()
-      .addElement(this.card.nativeElement)
-      .duration(1500)
-      .iterations(Infinity)
-      .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
-      .fromTo('opacity', '1', '0.2');
+  constructor(
+    private animationCtrl: AnimationController,
+    private gestureCtrl: GestureController
+  ) {}
+  
+  private onMove(ev) {
+    if (!this.started) {
+      this.animation.progressStart();
+      this.started = true;
+    }
+    
+    this.animation.progressStep(this.getStep(ev));
   }
-
-  play() {
-    this.animation.play();
+  
+  private onEnd(ev) {
+    if (!this.started) { return; }
+  
+    this.gesture.enable(false);
+  
+    const step = this.getStep(ev);
+    const shouldComplete = step > 0.5;
+  
+    this.animation
+      .progressEnd((shouldComplete) ? 1 : 0, step)
+      .onFinish(() => { this.gesture.enable(true); });
+  
+    this.initialStep = (shouldComplete) ? this.MAX_TRANSLATE : 0;
+    this.started = false;
   }
-
-  pause() {
-    this.animation.pause();
+  
+  private clamp(min, n, max) {
+    return Math.max(min, Math.min(n, max));
+  }
+  
+  private getStep(ev) {
+    const delta = this.initialStep + ev.deltaX;
+    return this.clamp(0, delta / this.MAX_TRANSLATE, 1);
   }
 
-  stop() {
-    this.animation.stop();
+  ngAfterViewInit() {
+    this.animation = this.animationCtrl.create()
+      .addElement(this.card.nativeElement)
+      .duration(1000)
+      .fromTo('transform', 'translateX(0)', `translateX(${this.MAX_TRANSLATE}px)`);
+    
+    const gesture = this.gesture = this.gestureCtrl.create({
+      el: this.card.nativeElement,
+      threshold: 0,
+      gestureName: 'card-drag',
+      onMove: ev => this.onMove(ev),
+      onEnd: ev => this.onEnd(ev)
+    });
+    
+    gesture.enable(true);
   }
 }
+
 ```
diff --git a/static/usage/v7/animations/gesture/index.md b/static/usage/v7/animations/gesture/index.md
index 6775173349b..11b9fb06b96 100644
--- a/static/usage/v7/animations/gesture/index.md
+++ b/static/usage/v7/animations/gesture/index.md
@@ -6,6 +6,7 @@ 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';
+import angular_example_component_css from './angular/example_component_css.md';
 
 <Playground
   version="7"
@@ -17,6 +18,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/example.component.css': angular_example_component_css
       },
     },
   }}

From 9f7fdb493938e38757014a64fdc1b4a823d6d13f Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 14 Jul 2023 14:20:00 -0400
Subject: [PATCH 10/13] clean up

---
 static/usage/v7/animations/gesture/vue.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/static/usage/v7/animations/gesture/vue.md b/static/usage/v7/animations/gesture/vue.md
index 9273300f4b3..81308993693 100644
--- a/static/usage/v7/animations/gesture/vue.md
+++ b/static/usage/v7/animations/gesture/vue.md
@@ -28,8 +28,6 @@
         let initialStep = 0;
         let started = false;
         
-        const card = document.querySelector('ion-card');
-        
         /**
          * The track is 344px wide.
          * The card is 100px wide.
@@ -38,7 +36,7 @@
         const MAX_TRANSLATE = 344 - 100 - 32;
         
         const animation = createAnimation()
-          .addElement(card)
+          .addElement(cardEl.value.$el)
           .duration(1000)
           .fromTo('transform', 'translateX(0)', `translateX(${MAX_TRANSLATE}px)`);
         

From 3c885e52b92511ad0e9c4cd107db79686073441e Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 14 Jul 2023 14:31:13 -0400
Subject: [PATCH 11/13] docs: add react example

---
 static/usage/v7/animations/gesture/index.md   | 12 ++-
 static/usage/v7/animations/gesture/react.md   | 45 ----------
 .../v7/animations/gesture/react/main_css.md   | 17 ++++
 .../v7/animations/gesture/react/main_tsx.md   | 90 +++++++++++++++++++
 4 files changed, 117 insertions(+), 47 deletions(-)
 delete mode 100644 static/usage/v7/animations/gesture/react.md
 create mode 100644 static/usage/v7/animations/gesture/react/main_css.md
 create mode 100644 static/usage/v7/animations/gesture/react/main_tsx.md

diff --git a/static/usage/v7/animations/gesture/index.md b/static/usage/v7/animations/gesture/index.md
index 11b9fb06b96..6340bda9db5 100644
--- a/static/usage/v7/animations/gesture/index.md
+++ b/static/usage/v7/animations/gesture/index.md
@@ -1,7 +1,10 @@
 import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
-import react from './react.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
 import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
@@ -12,7 +15,12 @@ import angular_example_component_css from './angular/example_component_css.md';
   version="7"
   code={{
     javascript,
-    react,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
     vue,
     angular: {
       files: {
diff --git a/static/usage/v7/animations/gesture/react.md b/static/usage/v7/animations/gesture/react.md
deleted file mode 100644
index 9134a2d9f24..00000000000
--- a/static/usage/v7/animations/gesture/react.md
+++ /dev/null
@@ -1,45 +0,0 @@
-```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 animation = useRef<Animation | null>(null);
-
-  useEffect(() => {
-    if (animation.current === null) {
-      animation.current = createAnimation()
-        .addElement(cardEl.current!)
-        .duration(1500)
-        .iterations(Infinity)
-        .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
-        .fromTo('opacity', '1', '0.2');
-    }
-  }, [cardEl]);
-
-  const play = () => {
-    animation.current?.play();
-  };
-  const pause = () => {
-    animation.current?.pause();
-  };
-  const stop = () => {
-    animation.current?.stop();
-  };
-
-  return (
-    <>
-      <IonCard ref={cardEl}>
-        <IonCardContent>Card</IonCardContent>
-      </IonCard>
-
-      <IonButton onClick={play}>Play</IonButton>
-      <IonButton onClick={pause}>Pause</IonButton>
-      <IonButton onClick={stop}>Stop</IonButton>
-    </>
-  );
-}
-export default Example;
-```
diff --git a/static/usage/v7/animations/gesture/react/main_css.md b/static/usage/v7/animations/gesture/react/main_css.md
new file mode 100644
index 00000000000..c5dbd051cc3
--- /dev/null
+++ b/static/usage/v7/animations/gesture/react/main_css.md
@@ -0,0 +1,17 @@
+```css
+.container {
+  flex-direction: column;
+}
+
+.track {
+  width: 344px;
+  background: var(--ion-color-medium);
+  padding: 16px;
+}
+
+ion-card {
+  width: 100px;
+  box-shadow: none;
+  margin: 0px;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/animations/gesture/react/main_tsx.md b/static/usage/v7/animations/gesture/react/main_tsx.md
new file mode 100644
index 00000000000..c71993e9769
--- /dev/null
+++ b/static/usage/v7/animations/gesture/react/main_tsx.md
@@ -0,0 +1,90 @@
+```tsx
+import React, { useEffect, useRef } from 'react';
+import { IonCard, IonCardContent, createAnimation, createGesture } from '@ionic/react';
+import type { Animation, Gesture, GestureDetail } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  const cardEl = useRef<HTMLIonCardElement | null>(null);
+  const animation = useRef<Animation | null>(null);
+  const gesture = useRef<Gesture | null>(null);
+  const initialStep = useRef<number>(0);
+  const started = useRef<boolean>(false);
+
+  useEffect(() => {
+    if (animation.current === null) {    
+      /**
+       * The track is 344px wide.
+       * The card is 100px wide.
+       * We want 16px of margin on each end of the track.
+       */
+      const MAX_TRANSLATE = 344 - 100 - 32;
+        
+      animation.current = createAnimation()
+        .addElement(cardEl.current!)
+        .duration(1000)
+        .fromTo('transform', 'translateX(0)', `translateX(${MAX_TRANSLATE}px)`);
+      
+      gesture.current = createGesture({
+        el: cardEl.current!,
+        threshold: 0,
+        gestureName: 'card-drag',
+        onMove: ev => onMove(ev),
+        onEnd: ev => onEnd(ev)
+      });
+      
+      gesture.current.enable(true);
+      
+      const onMove = (ev: GestureDetail) => {
+        if (!started.current) {
+          animation.current!.progressStart();
+          started.current = true;
+        }
+      
+        animation.current!.progressStep(getStep(ev));
+      }
+      
+      const onEnd = (ev: GestureDetail) => {
+        if (!started.current) { return; }
+      
+        gesture.current!.enable(false);
+      
+        const step = getStep(ev);
+        const shouldComplete = step > 0.5;
+      
+        animation.current!
+          .progressEnd((shouldComplete) ? 1 : 0, step)
+          .onFinish(() => { gesture.current!.enable(true); });
+      
+        initialStep.current = (shouldComplete) ? MAX_TRANSLATE : 0;
+        started.current = false;
+      }
+      
+      const clamp = (min: number, n: number, max: number) => {
+        return Math.max(min, Math.min(n, max));
+      };
+      
+      const getStep = (ev: GestureDetail) => {
+        const delta = initialStep.current + ev.deltaX;
+        return clamp(0, delta / MAX_TRANSLATE, 1);
+      }
+    }
+  }, [cardEl]); 
+
+  return (
+    <>
+      <div className="container">
+        <div className="track">
+          <IonCard id="card" button={true} ref={cardEl}>
+            <IonCardContent>Card</IonCardContent>
+          </IonCard>
+        </div>
+      
+        <p>Drag the square along the track.</p>
+      </div>
+    </>
+  );
+}
+export default Example;
+```

From 86a275885205361ba68d923b3477ca9024c875a0 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 14 Jul 2023 14:32:57 -0400
Subject: [PATCH 12/13] types and clean up

---
 .../gesture/angular/example_component_ts.md           | 11 +++++------
 static/usage/v7/animations/gesture/vue.md             | 10 +++++-----
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/static/usage/v7/animations/gesture/angular/example_component_ts.md b/static/usage/v7/animations/gesture/angular/example_component_ts.md
index a0f5ea186ab..a8ecf734721 100644
--- a/static/usage/v7/animations/gesture/angular/example_component_ts.md
+++ b/static/usage/v7/animations/gesture/angular/example_component_ts.md
@@ -1,8 +1,7 @@
 ```ts
 import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core';
-import type { QueryList } from '@angular/core';
 import { AnimationController, GestureController, IonCard } from '@ionic/angular';
-import type { Animation, Gesture } from '@ionic/angular';
+import type { Animation, Gesture, GestureDetail } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',
@@ -29,7 +28,7 @@ export class ExampleComponent {
     private gestureCtrl: GestureController
   ) {}
   
-  private onMove(ev) {
+  private onMove(ev: GestureDetail) {
     if (!this.started) {
       this.animation.progressStart();
       this.started = true;
@@ -38,7 +37,7 @@ export class ExampleComponent {
     this.animation.progressStep(this.getStep(ev));
   }
   
-  private onEnd(ev) {
+  private onEnd(ev: GestureDetail) {
     if (!this.started) { return; }
   
     this.gesture.enable(false);
@@ -54,11 +53,11 @@ export class ExampleComponent {
     this.started = false;
   }
   
-  private clamp(min, n, max) {
+  private clamp(min: number, n: number, max: number) {
     return Math.max(min, Math.min(n, max));
   }
   
-  private getStep(ev) {
+  private getStep(ev: GestureDetail) {
     const delta = this.initialStep + ev.deltaX;
     return this.clamp(0, delta / this.MAX_TRANSLATE, 1);
   }
diff --git a/static/usage/v7/animations/gesture/vue.md b/static/usage/v7/animations/gesture/vue.md
index 81308993693..40e5632df3e 100644
--- a/static/usage/v7/animations/gesture/vue.md
+++ b/static/usage/v7/animations/gesture/vue.md
@@ -13,7 +13,7 @@
 
 <script lang="ts">
   import { IonCard, IonCardContent, createAnimation, createGesture } from '@ionic/vue';
-
+  import type { GestureDetail } from '@ionic/vue';
   import { defineComponent, ref, onMounted } from 'vue';
 
   export default defineComponent({
@@ -50,7 +50,7 @@
         
         gesture.enable(true);
         
-        const onMove = (ev) => {
+        const onMove = (ev: GestureDetail) => {
           if (!started) {
             animation.progressStart();
             started = true;
@@ -59,7 +59,7 @@
           animation.progressStep(getStep(ev));
         }
         
-        const onEnd = (ev) => {
+        const onEnd = (ev: GestureDetail) => {
           if (!started) { return; }
         
           gesture.enable(false);
@@ -75,11 +75,11 @@
           started = false;
         }
         
-        const clamp = (min, n, max) => {
+        const clamp = (min: number, n: number, max: number) => {
           return Math.max(min, Math.min(n, max));
         };
         
-        const getStep = (ev) => {
+        const getStep = (ev: GestureDetail) => {
           const delta = initialStep + ev.deltaX;
           return clamp(0, delta / MAX_TRANSLATE, 1);
         }

From 99e4c616aa72862564d3080c1d05d9ffa0e8acc4 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 14 Jul 2023 14:58:32 -0400
Subject: [PATCH 13/13] lint

---
 .../gesture/angular/example_component_css.md  |  2 +-
 .../gesture/angular/example_component_ts.md   | 63 +++++++++----------
 static/usage/v7/animations/gesture/demo.html  | 27 ++++----
 static/usage/v7/animations/gesture/index.md   |  2 +-
 .../usage/v7/animations/gesture/javascript.md | 56 +++++++++--------
 .../v7/animations/gesture/react/main_css.md   |  2 +-
 .../v7/animations/gesture/react/main_tsx.md   | 52 +++++++--------
 static/usage/v7/animations/gesture/vue.md     | 54 ++++++++--------
 8 files changed, 134 insertions(+), 124 deletions(-)

diff --git a/static/usage/v7/animations/gesture/angular/example_component_css.md b/static/usage/v7/animations/gesture/angular/example_component_css.md
index c5dbd051cc3..c06ce353f7c 100644
--- a/static/usage/v7/animations/gesture/angular/example_component_css.md
+++ b/static/usage/v7/animations/gesture/angular/example_component_css.md
@@ -14,4 +14,4 @@ ion-card {
   box-shadow: none;
   margin: 0px;
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v7/animations/gesture/angular/example_component_ts.md b/static/usage/v7/animations/gesture/angular/example_component_ts.md
index a8ecf734721..7b9aadccf5e 100644
--- a/static/usage/v7/animations/gesture/angular/example_component_ts.md
+++ b/static/usage/v7/animations/gesture/angular/example_component_ts.md
@@ -6,78 +6,77 @@ import type { Animation, Gesture, GestureDetail } from '@ionic/angular';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
-  styleUrls: ['example.component.css']
+  styleUrls: ['example.component.css'],
 })
 export class ExampleComponent {
   @ViewChild(IonCard, { read: ElementRef }) card: ElementRef<HTMLIonCardElement>;
-  
+
   private animation: Animation;
   private gesture: Gesture;
   private started = false;
   private initialStep = 0;
 
   /**
-     * The track is 344px wide.
-     * The card is 100px wide.
-     * We want 16px of margin on each end of the track.
-     */
+   * The track is 344px wide.
+   * The card is 100px wide.
+   * We want 16px of margin on each end of the track.
+   */
   private readonly MAX_TRANSLATE = 344 - 100 - 32;
 
-  constructor(
-    private animationCtrl: AnimationController,
-    private gestureCtrl: GestureController
-  ) {}
-  
+  constructor(private animationCtrl: AnimationController, private gestureCtrl: GestureController) {}
+
   private onMove(ev: GestureDetail) {
     if (!this.started) {
       this.animation.progressStart();
       this.started = true;
     }
-    
+
     this.animation.progressStep(this.getStep(ev));
   }
-  
+
   private onEnd(ev: GestureDetail) {
-    if (!this.started) { return; }
-  
+    if (!this.started) {
+      return;
+    }
+
     this.gesture.enable(false);
-  
+
     const step = this.getStep(ev);
     const shouldComplete = step > 0.5;
-  
-    this.animation
-      .progressEnd((shouldComplete) ? 1 : 0, step)
-      .onFinish(() => { this.gesture.enable(true); });
-  
-    this.initialStep = (shouldComplete) ? this.MAX_TRANSLATE : 0;
+
+    this.animation.progressEnd(shouldComplete ? 1 : 0, step).onFinish(() => {
+      this.gesture.enable(true);
+    });
+
+    this.initialStep = shouldComplete ? this.MAX_TRANSLATE : 0;
     this.started = false;
   }
-  
+
   private clamp(min: number, n: number, max: number) {
     return Math.max(min, Math.min(n, max));
   }
-  
+
   private getStep(ev: GestureDetail) {
     const delta = this.initialStep + ev.deltaX;
     return this.clamp(0, delta / this.MAX_TRANSLATE, 1);
   }
 
   ngAfterViewInit() {
-    this.animation = this.animationCtrl.create()
+    this.animation = this.animationCtrl
+      .create()
       .addElement(this.card.nativeElement)
       .duration(1000)
       .fromTo('transform', 'translateX(0)', `translateX(${this.MAX_TRANSLATE}px)`);
-    
-    const gesture = this.gesture = this.gestureCtrl.create({
+
+    const gesture = (this.gesture = this.gestureCtrl.create({
       el: this.card.nativeElement,
       threshold: 0,
       gestureName: 'card-drag',
-      onMove: ev => this.onMove(ev),
-      onEnd: ev => this.onEnd(ev)
-    });
-    
+      onMove: (ev) => this.onMove(ev),
+      onEnd: (ev) => this.onEnd(ev),
+    }));
+
     gesture.enable(true);
   }
 }
-
 ```
diff --git a/static/usage/v7/animations/gesture/demo.html b/static/usage/v7/animations/gesture/demo.html
index 3da003f30f4..88aa10c5c38 100644
--- a/static/usage/v7/animations/gesture/demo.html
+++ b/static/usage/v7/animations/gesture/demo.html
@@ -9,7 +9,10 @@
     <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, createGesture } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/index.esm.js';
+      import {
+        createAnimation,
+        createGesture,
+      } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/index.esm.js';
       window.createAnimation = createAnimation;
       window.createGesture = createGesture;
 
@@ -34,8 +37,8 @@
         el: card,
         threshold: 0,
         gestureName: 'card-drag',
-        onMove: ev => onMove(ev),
-        onEnd: ev => onEnd(ev)
+        onMove: (ev) => onMove(ev),
+        onEnd: (ev) => onEnd(ev),
       });
 
       gesture.enable(true);
@@ -47,23 +50,25 @@
         }
 
         animation.progressStep(getStep(ev));
-      }
+      };
 
       const onEnd = (ev) => {
-        if (!started) { return; }
+        if (!started) {
+          return;
+        }
 
         gesture.enable(false);
 
         const step = getStep(ev);
         const shouldComplete = step > 0.5;
 
-        animation
-          .progressEnd((shouldComplete) ? 1 : 0, step)
-          .onFinish(() => { gesture.enable(true); });
+        animation.progressEnd(shouldComplete ? 1 : 0, step).onFinish(() => {
+          gesture.enable(true);
+        });
 
-        initialStep = (shouldComplete) ? MAX_TRANSLATE : 0;
+        initialStep = shouldComplete ? MAX_TRANSLATE : 0;
         started = false;
-      }
+      };
 
       const clamp = (min, n, max) => {
         return Math.max(min, Math.min(n, max));
@@ -72,7 +77,7 @@
       const getStep = (ev) => {
         const delta = initialStep + ev.deltaX;
         return clamp(0, delta / MAX_TRANSLATE, 1);
-      }
+      };
     </script>
 
     <style>
diff --git a/static/usage/v7/animations/gesture/index.md b/static/usage/v7/animations/gesture/index.md
index 6340bda9db5..b3e53d6d8f3 100644
--- a/static/usage/v7/animations/gesture/index.md
+++ b/static/usage/v7/animations/gesture/index.md
@@ -26,7 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.ts': angular_example_component_ts,
-        'src/app/example.component.css': angular_example_component_css
+        'src/app/example.component.css': angular_example_component_css,
       },
     },
   }}
diff --git a/static/usage/v7/animations/gesture/javascript.md b/static/usage/v7/animations/gesture/javascript.md
index 24cafd23b90..3535705d5eb 100644
--- a/static/usage/v7/animations/gesture/javascript.md
+++ b/static/usage/v7/animations/gesture/javascript.md
@@ -13,12 +13,12 @@
   .container {
     display: flex;
   }
-  
+
   .track {
     width: 344px;
 
     background: var(--ion-color-medium);
-    
+
     padding: 16px;
   }
 
@@ -26,7 +26,7 @@
     width: 100px;
 
     box-shadow: none;
-    
+
     margin: 0px;
   }
 </style>
@@ -34,63 +34,65 @@
 <script>
   let initialStep = 0;
   let started = false;
-  
+
   const card = document.querySelector('ion-card');
-  
+
   /**
    * The track is 344px wide.
    * The card is 100px wide.
    * We want 16px of margin on each end of the track.
    */
   const MAX_TRANSLATE = 344 - 100 - 32;
-  
+
   const animation = createAnimation()
     .addElement(card)
     .duration(1000)
     .fromTo('transform', 'translateX(0)', `translateX(${MAX_TRANSLATE}px)`);
-  
+
   const gesture = createGesture({
     el: card,
     threshold: 0,
     gestureName: 'card-drag',
-    onMove: ev => onMove(ev),
-    onEnd: ev => onEnd(ev)
+    onMove: (ev) => onMove(ev),
+    onEnd: (ev) => onEnd(ev),
   });
-  
+
   gesture.enable(true);
-  
+
   var onMove = (ev) => {
     if (!started) {
       animation.progressStart();
       started = true;
     }
-  
+
     animation.progressStep(getStep(ev));
-  }
-  
+  };
+
   var onEnd = (ev) => {
-    if (!started) { return; }
-  
+    if (!started) {
+      return;
+    }
+
     gesture.enable(false);
-  
+
     const step = getStep(ev);
     const shouldComplete = step > 0.5;
-  
-    animation
-      .progressEnd((shouldComplete) ? 1 : 0, step)
-      .onFinish(() => { gesture.enable(true); });
-  
-    initialStep = (shouldComplete) ? MAX_TRANSLATE : 0;
+
+    animation.progressEnd(shouldComplete ? 1 : 0, step).onFinish(() => {
+      gesture.enable(true);
+    });
+
+    initialStep = shouldComplete ? MAX_TRANSLATE : 0;
     started = false;
-  }
-  
+  };
+
   var clamp = (min, n, max) => {
     return Math.max(min, Math.min(n, max));
   };
-  
+
   var getStep = (ev) => {
     const delta = initialStep + ev.deltaX;
     return clamp(0, delta / MAX_TRANSLATE, 1);
-  }
+  };
 </script>
 ```
diff --git a/static/usage/v7/animations/gesture/react/main_css.md b/static/usage/v7/animations/gesture/react/main_css.md
index c5dbd051cc3..c06ce353f7c 100644
--- a/static/usage/v7/animations/gesture/react/main_css.md
+++ b/static/usage/v7/animations/gesture/react/main_css.md
@@ -14,4 +14,4 @@ ion-card {
   box-shadow: none;
   margin: 0px;
 }
-```
\ No newline at end of file
+```
diff --git a/static/usage/v7/animations/gesture/react/main_tsx.md b/static/usage/v7/animations/gesture/react/main_tsx.md
index c71993e9769..73fca7dfe22 100644
--- a/static/usage/v7/animations/gesture/react/main_tsx.md
+++ b/static/usage/v7/animations/gesture/react/main_tsx.md
@@ -13,64 +13,66 @@ function Example() {
   const started = useRef<boolean>(false);
 
   useEffect(() => {
-    if (animation.current === null) {    
+    if (animation.current === null) {
       /**
        * The track is 344px wide.
        * The card is 100px wide.
        * We want 16px of margin on each end of the track.
        */
       const MAX_TRANSLATE = 344 - 100 - 32;
-        
+
       animation.current = createAnimation()
         .addElement(cardEl.current!)
         .duration(1000)
         .fromTo('transform', 'translateX(0)', `translateX(${MAX_TRANSLATE}px)`);
-      
+
       gesture.current = createGesture({
         el: cardEl.current!,
         threshold: 0,
         gestureName: 'card-drag',
-        onMove: ev => onMove(ev),
-        onEnd: ev => onEnd(ev)
+        onMove: (ev) => onMove(ev),
+        onEnd: (ev) => onEnd(ev),
       });
-      
+
       gesture.current.enable(true);
-      
+
       const onMove = (ev: GestureDetail) => {
         if (!started.current) {
           animation.current!.progressStart();
           started.current = true;
         }
-      
+
         animation.current!.progressStep(getStep(ev));
-      }
-      
+      };
+
       const onEnd = (ev: GestureDetail) => {
-        if (!started.current) { return; }
-      
+        if (!started.current) {
+          return;
+        }
+
         gesture.current!.enable(false);
-      
+
         const step = getStep(ev);
         const shouldComplete = step > 0.5;
-      
-        animation.current!
-          .progressEnd((shouldComplete) ? 1 : 0, step)
-          .onFinish(() => { gesture.current!.enable(true); });
-      
-        initialStep.current = (shouldComplete) ? MAX_TRANSLATE : 0;
+
+        animation.current!.progressEnd(shouldComplete ? 1 : 0, step).onFinish(() => {
+          gesture.current!.enable(true);
+        });
+
+        initialStep.current = shouldComplete ? MAX_TRANSLATE : 0;
         started.current = false;
-      }
-      
+      };
+
       const clamp = (min: number, n: number, max: number) => {
         return Math.max(min, Math.min(n, max));
       };
-      
+
       const getStep = (ev: GestureDetail) => {
         const delta = initialStep.current + ev.deltaX;
         return clamp(0, delta / MAX_TRANSLATE, 1);
-      }
+      };
     }
-  }, [cardEl]); 
+  }, [cardEl]);
 
   return (
     <>
@@ -80,7 +82,7 @@ function Example() {
             <IonCardContent>Card</IonCardContent>
           </IonCard>
         </div>
-      
+
         <p>Drag the square along the track.</p>
       </div>
     </>
diff --git a/static/usage/v7/animations/gesture/vue.md b/static/usage/v7/animations/gesture/vue.md
index 40e5632df3e..9555355fe48 100644
--- a/static/usage/v7/animations/gesture/vue.md
+++ b/static/usage/v7/animations/gesture/vue.md
@@ -6,7 +6,7 @@
         <ion-card-content>Card</ion-card-content>
       </ion-card>
     </div>
-  
+
     <p>Drag the square along the track.</p>
   </div>
 </template>
@@ -27,62 +27,64 @@
       onMounted(() => {
         let initialStep = 0;
         let started = false;
-        
+
         /**
          * The track is 344px wide.
          * The card is 100px wide.
          * We want 16px of margin on each end of the track.
          */
         const MAX_TRANSLATE = 344 - 100 - 32;
-        
+
         const animation = createAnimation()
           .addElement(cardEl.value.$el)
           .duration(1000)
           .fromTo('transform', 'translateX(0)', `translateX(${MAX_TRANSLATE}px)`);
-        
+
         const gesture = createGesture({
           el: card,
           threshold: 0,
           gestureName: 'card-drag',
-          onMove: ev => onMove(ev),
-          onEnd: ev => onEnd(ev)
+          onMove: (ev) => onMove(ev),
+          onEnd: (ev) => onEnd(ev),
         });
-        
+
         gesture.enable(true);
-        
+
         const onMove = (ev: GestureDetail) => {
           if (!started) {
             animation.progressStart();
             started = true;
           }
-        
+
           animation.progressStep(getStep(ev));
-        }
-        
+        };
+
         const onEnd = (ev: GestureDetail) => {
-          if (!started) { return; }
-        
+          if (!started) {
+            return;
+          }
+
           gesture.enable(false);
-        
+
           const step = getStep(ev);
           const shouldComplete = step > 0.5;
-        
-          animation
-            .progressEnd((shouldComplete) ? 1 : 0, step)
-            .onFinish(() => { gesture.enable(true); });
-        
-          initialStep = (shouldComplete) ? MAX_TRANSLATE : 0;
+
+          animation.progressEnd(shouldComplete ? 1 : 0, step).onFinish(() => {
+            gesture.enable(true);
+          });
+
+          initialStep = shouldComplete ? MAX_TRANSLATE : 0;
           started = false;
-        }
-        
+        };
+
         const clamp = (min: number, n: number, max: number) => {
           return Math.max(min, Math.min(n, max));
         };
-        
+
         const getStep = (ev: GestureDetail) => {
           const delta = initialStep + ev.deltaX;
           return clamp(0, delta / MAX_TRANSLATE, 1);
-        }
+        };
       });
 
       return { cardEl };
@@ -94,13 +96,13 @@
   .container {
     flex-direction: column;
   }
-  
+
   .track {
     width: 344px;
     background: var(--ion-color-medium);
     padding: 16px;
   }
-  
+
   ion-card {
     width: 100px;
     box-shadow: none;