docs(animation): add gesture animation playground (#3043)

Co-authored-by: dillionmegida <dillionmegida@gmail.com>

Author: liamdebeasi

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
 

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;
+}
+```

static/usage/v7/animations/gesture/angular/example_component_html.md

@@ -0,0 +1,11 @@
+```html
+<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>
+```