Event after swipe fires multiple times hammer.js

Question

I use hammer.js to create a T*nder-Style swiping. After swipe right for love or left for nope, I want to start some scripts. In my approach It actually fires multiple times after swipe to right or left. Maybe someone has some hints to avoid this issue?

var allCards = document.querySelectorAll('.match--card');
var nope = document.getElementById('nope');
var love = document.getElementById('love');

allCards.forEach(function (el) {
  var hammertime = new Hammer(el);
  var direction;

hammertime.on('pan', function (event) {
  el.classList.add('moving');
});

hammertime.on('pan', function (event) {
  if (event.deltaX === 0) return;
if (event.center.x === 0 && event.center.y === 0) return;

matchContainer.classList.toggle('match_love', event.deltaX > 0);
matchContainer.classList.toggle('match_nope', event.deltaX < 0);

var xMulti = event.deltaX * 0.03;
var yMulti = event.deltaY / 80;
var rotate = xMulti * yMulti;

event.target.style.transform = 'translate(' + event.deltaX + 'px, ' + event.deltaY + 'px) rotate(' + rotate + 'deg)';
});

hammertime.on('panend', function (event) {
  var direction = event.direction;
  el.classList.remove('moving');
  matchContainer.classList.remove('match_love');
  matchContainer.classList.remove('match_nope');

  var moveOutWidth = document.body.clientWidth;
  var keep = Math.abs(event.deltaX) < 80 || Math.abs(event.velocityX) < 0.5;

event.target.classList.toggle('removed', !keep);

if (keep) {
  event.target.style.transform = '';
} else {
  var endX = Math.max(Math.abs(event.velocityX) * moveOutWidth, moveOutWidth);
  var toX = event.deltaX > 0 ? endX : -endX;
  var endY = Math.abs(event.velocityY) * moveOutWidth;
  var toY = event.deltaY > 0 ? endY : -endY;
  var xMulti = event.deltaX * 0.03;
  var yMulti = event.deltaY / 80;
  var rotate = xMulti * yMulti;
  event.target.style.transform = 'translate(' + toX + 'px, ' + (toY + event.deltaY) + 'px) rotate(' + rotate + 'deg)';

  if (direction == 2) {
    console.log('direction nope');
    bubble_fn_swipeNope()      
   } else if (direction == 4) {
    console.log('direction love')
    bubble_fn_swipeLove()      
   }

 var activeCards = document.querySelectorAll('.match--card:not(.removed)').length;
 bubble_fn_activeCards(activeCards);

    initCards();
    }
  });
});

function initCards(card, index) {

var newCards = document.querySelectorAll('.match--card:not(.removed)');
if (!newCards.length) {
  bubble_fn_activeCards(0);
} else {
  var cL = newCards.length;
  bubble_fn_activeCards(cL);
  var card= newCards[0];
  var cardId = card.id;
  bubble_fn_activeCardUser(cardId);
}

newCards.forEach(function (card, index) {
  card.style.zIndex = allCards.length - index;
  card.style.transform = 'scale(' + (20 - index) / 20 + ') translateY(-' + 30 * index + 'px)';
  card.style.opacity = (10 - index) / 10;
});

matchContainer.classList.add('loaded');

}

initCards();