Question

I’m currently working with webkit and touch events.

I can get an element to swipe along the touch move, and get it back on touchend.

But whatever I try, it gets back to its original state without animation, so it’s ugly.

var obj = document.getElementById('element');

obj.addEventListener('touchmove', function(event) {
  event.preventDefault();
  if (event.targetTouches.length == 1) {
    var touch = event.targetTouches[0];
    obj.style.left = touch.pageX + 'px';
  }
}, false);

obj.addEventListener('touchend', function(event) {

  ???

}, false);

I’ve tried startnode, style, webkit-animation-name (that works outside touch events) and some other weirds ways, but it’s still unanimated as hell.

Thanks for your help.

Answer 1

You can set an element to have a transition so that when you set a position it will take X amount of time for the element to move to that location.

.class {
    -webkit-transition: left ease 3s;
}

During drag you will want to set it to 0s so that it follows your finger without a delay.

Example:

var obj = document.getElementById('element');

obj.addEventListener('touchmove', function(event) {
  event.preventDefault();
  if (event.targetTouches.length == 1) {
    obj.style.webkitTransition = 'left ease 0s';
    var touch = event.targetTouches[0];
    obj.style.left = touch.pageX + 'px';
  }
}, false);

obj.addEventListener('touchend', function(event) {

  obj.style.webkitTransition = 'left ease 3s';
  //Set position here
}, false);