Detect desktop Safari's two-fingered swipe

Question

In Safari on OS X, with a magic trackpad or macbook trackpad, swiping right or left with two fingers effects back and forward, respectively. Is there a way to detect this, as distinct from clicking back/forward, or hitting command+arrow etc?

The reason is that the swipe has it's own reveal-style swiping animation, and with custom ajax transitions on a site, it looks really weird when you get one following the other. This happens when browsing code on github, for example.

Update 23/6/16: Github reverted to simply swapping out the page content with no transition, which was a smart move. My current practice is to do the same for back/forward, even if some sort of fancy transition in is use on the site. This prevents clashes between whatever the browser might do and the site transition

Answer 1

You can use the mousewheel event to see if an horizontal scroll on the trackpad has been performed before your popstate event:

// boolean that stores if a swipe has been performed.
var bScrolled = false;
// countdown in ms before resetting the boolean.
var iTime = 1000;
var oTimeout;
window.addEventListener('mousewheel', function(e) {
  if (e.wheelDeltaY === 0) {
  // there is an horizontal scroll
    if (!bScrolled) {
    // no need to set bScrolled to true if it has been done within the iTime time. 
      bScrolled = true;
      oTimeout = setTimeout(function(){
        bScrolled = false;
      }, iTime);
    }
  }
});

window.onpopstate = function() {
  // clear the timeout to be sure we keep the correct value for bScrolled
  clearTimeout(oTimeout);
  // check if there has been a swipe prior to the change of history state
  if (bScrolled) {
    // check which browser & OS the user is using, then
    // trigger your awesome custom transition.
  }
}