From 492843dc1465d163ace2797de71a6640d144ef45 Mon Sep 17 00:00:00 2001
From: dillionmegida <dillionmegida@gmail.com>
Date: Thu, 15 Oct 2020 20:38:41 +0100
Subject: [PATCH 1/2] docs(animations): add React and Angular examples for
 gesture animations

---
 src/pages/utilities/animations.md | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/pages/utilities/animations.md b/src/pages/utilities/animations.md
index 43752359e4e..38ddf86ee0a 100755
--- a/src/pages/utilities/animations.md
+++ b/src/pages/utilities/animations.md
@@ -671,18 +671,18 @@ ngOnInit() {
     el: this.square.nativeElement,
     threshold: 0,
     gestureName: 'square-drag',
-    onMove: ev: this.onMove(ev),
-    onEnd: ev: this.onEnd(ev)
+    onMove: ev => this.onMove(ev),
+    onEnd: ev => this.onEnd(ev)
   })
   
   this.gesture.enable(true);
 }
 
 private onMove(ev) {
-  if (!started) {
+  if (!this.started) {
     this.animation.progressStart();
     this.started = true;
-  }
+  } 
   
   this.animation.progressStep(this.getStep(ev));
 }
@@ -697,7 +697,7 @@ private onEnd(ev) {
 
   this.animation
     .progressEnd((shouldComplete) ? 1 : 0, step)
-    .onFinish((): { this.gesture.enable(true); });
+    .onFinish(() => { this.gesture.enable(true); });
   
   this.initialStep = (shouldComplete) ? this.MAX_TRANSLATE : 0;
   this.started = false;
@@ -726,6 +726,8 @@ class MyComponent extends React.Component<{}, any> {
   private gesture?: Gesture;
   private started: boolean = false;
   private initialStep: number = 0;
+
+  MAX_TRANSLATE = 200
   
   constructor(props: any) {
     super(props);
@@ -788,13 +790,13 @@ class MyComponent extends React.Component<{}, any> {
       }, opts: { oneTimeCallback: true }}
     });
   
-    this.initialStep = (shouldComplete) ? MAX_TRANSLATE : 0;
+    this.initialStep = (shouldComplete) ? this.MAX_TRANSLATE : 0;
     this.started = false;
   }
   
   private getStep(ev: GestureDetail) {
     const delta = this.initialStep + ev.deltaX;
-    return this.clamp(0, delta / MAX_TRANSLATE, 1);
+    return this.clamp(0, delta / this.MAX_TRANSLATE, 1);
   }
   
   private clamp(min: number, n: number, max: number) {
@@ -815,7 +817,7 @@ class MyComponent extends React.Component<{}, any> {
             fromTo={{
               property: 'transform',
               fromValue: 'translateX(0)',
-              toValue: `translateX(${MAX_TRANSLATE}px)`
+              toValue: `translateX(${this.MAX_TRANSLATE}px)`
           }}>
             <div className="square"></div>
           </CreateAnimation>
@@ -828,6 +830,8 @@ class MyComponent extends React.Component<{}, any> {
 </docs-tab>
 </docs-tabs>
 
+You can view a live example of this in Angular [here](https://stackblitz.com/edit/ionic-angular-gesture-animations) and in React [here](https://stackblitz.com/edit/ionic-react-gesture-animations).
+
 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.
 
 <docs-codepen user="ionic" slug="jONxzRL"></docs-codepen>

From c4902c70a64f075b07372519da9ecaadce9f8917 Mon Sep 17 00:00:00 2001
From: dillionmegida <dillionmegida@gmail.com>
Date: Fri, 16 Oct 2020 22:06:00 +0100
Subject: [PATCH 2/2] docs(animations): add example links to gesture page

---
 src/pages/utilities/gestures.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/utilities/gestures.md b/src/pages/utilities/gestures.md
index 2b271f8753c..88413eb47a0 100755
--- a/src/pages/utilities/gestures.md
+++ b/src/pages/utilities/gestures.md
@@ -313,6 +313,8 @@ In the example above, we want to be able to detect double clicks on an element.
 
 See our guide on implementing gesture animations: [Gesture Animations with Ionic Animations](/docs/utilities/animations#gesture-animations)
 
+You can live examples of Gesture animations in Angular [here](https://stackblitz.com/edit/ionic-angular-gesture-animations) and in React [here](https://stackblitz.com/edit/ionic-react-gesture-animations).
+
 ## Browser Support
 
 | Browser/Platform     | Supported Versions |