I need to apply a translateX() transformation to an element while the user pans it using Hammer.js. Essentially, as the user drags the content left, I want it to move left and vice versa.
Here is my current implementation:
var manager = new Hammer.Manager(elem);
var panner = new Hammer.Pan({ direction: Hammer.DIRECTION_HORIZONTAL, threshold: 0 });
manager.add(panner);
manager.on("panleft", function(e) {
elem.style.transform = "translateX(" + (e.distance * -1) + "px)";
});
manager.on("panright", function(e) {
elem.style.transform = "translateX(" + e.distance + "px)";
});
The code functions properly, however, there is a glitch when the user pans left and then quickly goes back right causing negative translations. How can this be resolved?