JSFiddle - React, Tailwind, and code Playground

by ocanal

HTML

<div class="wrapper">
    <div class="wrap">
        <div id="square"></div>
    </div>
</div>

CSS

body, html {
    margin:0;
    padding:0;
    width:100%;
    height:100%;    
    font-family:sans-serif;
    font-size:1em;
    line-height:1.5em;
}

.wrapper {
    width:100%;
    height:100%;
    position: relative;
    display: table;
}

.wrap {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

#square {
    width:100px;
    height:100px;
    background:blue;
    margin:0 auto;
}

JavaScript

var dom = document.getElementById('square'),
    _width = parseInt($('#square').css('width')),
    vel = 5.0,
    min = _width,
    max = 300,
    scale;

dom.addEventListener("gesturechange", gestureChange, false);
dom.addEventListener("gestureend", gestureEnd, false);

function gestureChange(e) {

    e.preventDefault();

    scale = e.scale;
    var tempWidth = _width * scale;

    if (tempWidth > max) tempWidth = max;
    if (tempWidth < min) tempWidth = min;

    $('#square').css({
        'width': tempWidth + 'px',
        'height': tempWidth + 'px'
    });
}

function gestureEnd(e) {

    e.preventDefault();
    _width = parseInt($('#square').css('width'));
}