JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://googledrive.com/host/0BwJVaMrY8QdcWG5wbmh1S0p6UTQ/jquery.touchSwipe.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<div class="pinch">Pinch me, please!</div>

CSS

html, body{
    height:100%;
    width:100%;
    margin:0, auto;
}
.pinch{
    height:60%;
    width:80%;
    background:red;
}

JavaScript

//pinchZoom is the distance between the two fingers involved in the pinch
var pinchIn = null;
var dist = null;
$('.pinch').swipe({
    pinchIn:function(event, direction, distance, duration, fingerCount, pinchZoom){
        dist = null;
    },
    pinchOut:function(event, direction, distance, duration, fingerCount, pinchZoom){
    dist = null;
    },
    pinchStatus:function(event, phase, direction, distance, duration, fingerCount, pinchZoom){
        if(dist != null){
            if(dist > pinchZoom){
                pinchIn = true;
            }
            else{
                pinchIn = false;
            }
            dist = pinchZoom;
            if(pinchIn === true){
                console.log("pinching in");
            }
            else{
                console.log("pinching out");
            }
        }
        else{
            dist = pinchZoom;
        }
    },
    fingers:2,
    pinchThreshold:0
});