JSFiddle - React, Tailwind, and code Playground

HTML

<p>Tap on the box below.</p>
<p>When the box moves, try swiping and interacting with the box. It will stop moving on a touch device.</p>
<div class="box"></div>

CSS

* {
    -webkit-user-select: none;
}
.box {
    width: 200px;
    height: 200px;
    background-color: green;
}

JavaScript

var offset = 0;
var requestAnimationFrame = window.requestAnimationFrame ||
                                              window.mozRequestAnimationFrame ||
                                              window.webkitRequestAnimationFrame ||
                                              window.msRequestAnimationFrame;

$('.box').on('click', function() {
  animateWithAnimationFrame();

function touchHandlerDummy(e)
{
   // e.preventDefault();
    return false;
}
document.addEventListener("touchstart", touchHandlerDummy, false);
//document.addEventListener("touchmove", touchHandlerDummy, false);
//document.addEventListener("touchend", touchHandlerDummy, false);
});

function animateWithAnimationFrame() {
  if (offset === 500)
    return;
  offset++;
  $('.box').attr('style', '-webkit-transform: translate3d(' + offset + 'px, 0, 0)');
  requestAnimationFrame(animateWithAnimationFrame);   
}

// Animating with setTimeout makes no difference.
function animateWithSetTimeout() {
  if (offset === 500)
    return;
  offset++;
  $('.box').attr('style', '-webkit-transform: translate3d(' + offset + 'px, 0, 0)');
    setTimeout(function() {
        animateWithSetTimeout();
    }, 10);  
}