diff --git a/src/pages/utilities/gestures.md b/src/pages/utilities/gestures.md
index 2b271f8753c..023e309fb61 100755
--- a/src/pages/utilities/gestures.md
+++ b/src/pages/utilities/gestures.md
@@ -130,6 +130,7 @@ const onMove = (detail) => {
 
 ```javascript
 @ViewChild('paragraph') p: ElementRef;
+@ViewChild('rectangle') rectangle: ElementRef;
 
 ngOnInit() {
   const gesture = this.gestureCtrl.create({
@@ -146,7 +147,7 @@ private onMove(detail) {
   const deltaX = detail.deltaX;
   const velocityX = detail.velocityX;
     
-  this.p.innerHTML = `
+  this.p.nativeElement.innerHTML = `
     <div>Type: ${type}</div>
     <div>Current X: ${currentX}</div>
     <div>Delta X: ${deltaX}</div>
@@ -159,8 +160,9 @@ private onMove(detail) {
 
 ```javascript
 let p = document.querySelector('p');
+let rectangle = document.querySelector('.rectangle');
 const gesture = createGesture({
-  el: document.querySelector('.rectangle'),
+  el: rectangle,
   onMove: (detail) => { onMove(detail); }
 })
 
@@ -183,6 +185,8 @@ const onMove = (detail) => {
 </docs-tab>
 </docs-tabs>
 
+You can view a live example of this in Angular [here](https://stackblitz.com/edit/ionic-angular-basic-gestures) and in React [here](https://stackblitz.com/edit/ionic-react-basic-gestures).
+
 In this example, our app listens for gestures on the `.rectangle` element. When a gesture movement is detected, the `onMove` function is called, and our app logs the current gesture information.
 
 <docs-codepen user="ionic" slug="xxKBYdL"></docs-codepen>
@@ -196,6 +200,7 @@ In this example, our app listens for gestures on the `.rectangle` element. When
 
 ```javascript
 const backgrounds = ['rgba(0, 0, 255, 0.5)', 'rgba(0, 255, 0.5)', 'rgba(255, 0, 0, 0.5)', 'rgba(255, 255, 0, 0.5)', 'rgba(255, 0, 255, 0.5)', 'rgba(0, 255, 255, 0.5)'];
+const transforms: string[] = ["rotate(30deg)", "translateX(40px)", "translateY(40px)", "rotate(60deg)", "rotate(100deg)"]
 const DOUBLE_CLICK_THRESHOLD = 500;
 const rectangle = document.querySelector('.rectangle');
 const gesture = createGesture({
@@ -214,6 +219,7 @@ const onStart = () => {
   
   if (Math.abs(now - lastOnStart) <= DOUBLE_CLICK_THRESHOLD) {
     rectangle.style.setProperty('background', getRandomBackground());
+    rectangle.style.setProperty('transform', getRandomTransform());
     lastOnStart = 0;
   } else {
     lastOnStart = now;
@@ -226,6 +232,12 @@ const getRandomBackground = () => {
   
   return currentColor;
 }
+const getRandomTransform = () => {
+    const options = transforms.filter(t => t !== currentTransform);
+    currentTransform = options[Math.floor(Math.random() * options.length)];
+
+    return currentTransform;
+  };
 ```
 </docs-tab>
 <docs-tab tab="angular">
@@ -234,7 +246,9 @@ const getRandomBackground = () => {
 @ViewChild('rectangle') rectangle: ElementRef;
 
 private backgrounds: string[] = ['rgba(0, 0, 255, 0.5)', 'rgba(0, 255, 0.5)', 'rgba(255, 0, 0, 0.5)', 'rgba(255, 255, 0, 0.5)', 'rgba(255, 0, 255, 0.5)', 'rgba(0, 255, 255, 0.5)'];
+private transforms: string[] = ["rotate(30deg)", "translateX(40px)", "translateY(40px)", "rotate(60deg)", "rotate(100deg)"];
 private currentColor: string = 'rgba(0, 0, 255, 0.5)';
+private currentTransform: string = this.transforms[0];
 private lastOnStart: number = 0;
 private DOUBLE_CLICK_THRESHOLD: number = 500;
 
@@ -253,6 +267,7 @@ private onStart() {
   
   if (Math.abs(now - this.lastOnStart) <= this.DOUBLE_CLICK_THRESHOLD) {
     this.rectangle.nativeElement.style.setProperty('background', this.getRandomBackground());
+    this.rectangle.nativeElement.style.setProperty('transform', this.getRandomTransform());
     this.lastOnStart = 0;
   } else {
     this.lastOnStart = now;
@@ -265,30 +280,47 @@ private getRandomBackground() {
   
   return this.currentColor;
 }
+private getRandomTransform() {
+  const options = this.transforms.filter(t => t !== this.currentTransform);
+  this.currentTransform = options[Math.floor(Math.random() * options.length)];
+
+  return this.currentTransform;
+}
 ```
 </docs-tab>
 <docs-tab tab="react">
 
 ```javascript
 const backgrounds = ['rgba(0, 0, 255, 0.5)', 'rgba(0, 255, 0.5)', 'rgba(255, 0, 0, 0.5)', 'rgba(255, 255, 0, 0.5)', 'rgba(255, 0, 255, 0.5)', 'rgba(0, 255, 255, 0.5)'];
+const transforms: string[] = ["rotate(30deg)", "translateX(40px)", "translateY(40px)", "rotate(60deg)","rotate(100deg)"]
 const DOUBLE_CLICK_THRESHOLD = 500;
-const rectangle = document.querySelector('.rectangle');
-const gesture = createGesture({
-  el: rectangle,
-  threshold: 0,
-  onStart: () => { onStart(); }
-});
-
-gesture.enable();
+const rectangle = useRef(null)
+let gesture;
+
+useEffect(() => {
+  if (rectangle.current !== null) {
+    gesture = createGesture({
+      el: rectangle.current,
+      threshold: 0,
+      onStart: () => {
+        onStart();
+      }
+    });
+
+    gesture.enable();
+  }
+}, []);
 
 let lastOnStart = 0;
 let currentColor = 'rgba(0, 0, 255, 0.5)';
+let currentTransform = transforms[0];
 
 const onStart = () => {
   const now = Date.now();
   
   if (Math.abs(now - lastOnStart) <= DOUBLE_CLICK_THRESHOLD) {
-    rectangle.style.setProperty('background', getRandomBackground());
+    rectangle.current.style.setProperty('background', getRandomBackground());
+    rectangle.current.style.setProperty('transform', getRandomTransform());
     lastOnStart = 0;
   } else {
     lastOnStart = now;
@@ -301,10 +333,18 @@ const getRandomBackground = () => {
   
   return currentColor;
 }
+const getRandomTransform = () => {
+    const options = transforms.filter(t => t !== currentTransform);
+    currentTransform = options[Math.floor(Math.random() * options.length)];
+
+    return currentTransform;
+  };
 ```
 </docs-tab>
 </docs-tabs>
 
+You can view a live example of this in Angular [here](https://stackblitz.com/edit/ionic-angular-double-click) and in React [here](https://stackblitz.com/edit/ionic-react-double-click).
+
 In the example above, we want to be able to detect double clicks on an element. By setting our `threshold` to `0`, we can ensure our gesture object can detect clicks. Additionally, we define a click threshold so that only 2 clicks that occur in quick succession count as a double click.
 
 <docs-codepen user="ionic" slug="oNvVEwE"></docs-codepen>